Vue中的常用指令

Vue 会根据不同的【指令】,针对标签实现不同的【功能】

概念:指令(Directives)是 Vue 提供的带有 v- 前缀 的 特殊 标签属性

为啥要学:提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类:

  • 内容渲染指令(v-html、v-text)
  • 条件渲染指令(v-show、v-if、v-else、v-else-if)
  • 事件绑定指令(v-on)
  • 属性绑定指令 (v-bind)
  • 双向绑定指令(v-model)
  • 列表渲染指令(v-for)

指令是 vue 开发中最基础、最常用、最简单的知识点。

语法:

v-html = "表达式 " → 动态设置元素 innerHTML

示例代码:

<body><div id="app"><!-- 插值表达式并不能解析标签,而是会以存文本的方式展示到页面上 --><div>{{ msg }}</div><div v-html="msg"></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {msg: `<h3>学前端~来黑马!</h3>`}})</script>
</body>

具体有哪些指令可以查询官网

学习 --> API

image-20240128182108578

可以看见,总共14个指令,但这14个并不都是常用的,只用下述用红框框起来的这10个指令才是常用的

image-20240128182240360

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/18620.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Unity iOS打包】Library not loaded: ‘@rpath/AdjustSdk.framework/AdjustSdk‘

Unity打包iOS&#xff0c;XCode运行App黑屏卡死&#xff0c;报错&#xff1a; dyld[8412]: Library not loaded: rpath/AdjustSdk.framework/AdjustSdkReferenced from: /private/var/containers/Bundle/Application/C019F943-138F-4B33-AAC1-F18453F942D9/AnimalsBAMBAM.app/…

C++模板特化与偏特化 template <>的含义

C++模板特化 C++模板特化是模板编程中的一个强大特性,它允许程序员为特定的类型或模板参数提供定制化的实现(举个例子,即如果T类型是int类型时候,想要专门的函数实现)。以下是一些C++模板特化的例子: 模板特化(Template Specialization)是模板编程的一个特性,它允许…

采用Java+ SpringBoot+ IntelliJ+idea开发的ADR药物不良反应监测系统源码

采用Java SpringBoot IntelliJidea开发的ADR药物不良反应监测系统源码 ADR药物不良反应监测系统有哪些应用场景&#xff1f; ADR药物不良反应监测系统有哪些应用场景&#xff1f; ADR药物不良反应监测系统具有广泛的应用场景&#xff0c;以下是一些主要的应用场景&#xff1a…

发现一个可以白嫖GPU的平台

网址 https://platform.virtaicloud.com/gemini_web/auth/register?inviteCodeb0322161368ead7f49716688486796dd 驱动云注册有100点的算力点&#xff0c;目前最便宜的机器大概是0.49算力点每小时&#xff0c;安装个sd或者简单学习训练数据的话&#xff0c;应该能用挺久的。…

富格林:可信计策防止诱导被骗

富格林指出&#xff0c;现货黄金是一种大众化的投资选择&#xff0c;很多投资者会选择进入黄金市场进行交易。现货黄金因其灵活的交易方式和双向交易方式&#xff0c;为投资者提供了更多的获利机会&#xff0c;但是&#xff0c;黄金投资者要想盈利&#xff0c;这与投资者的交易…

低延迟更灵活,开发者怎能不爱分布式云

为了努力部署和管理复杂的数据密集型应用程序&#xff0c;从而满足客户不断变化的需求&#xff0c;我们需要一种方法让这些应用程序和工作负载更接近位于全球任意一个角落的客户。过去多年来&#xff0c;云计算满足了这种需求。不过这就够了吗&#xff1f;适合过去的东西&#…

代码随想录-算法训练营day54【动态规划15:判断子序列、不同的子序列】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第九章 动态规划part15● 392.判断子序列 ● 115.不同的子序列 详细布置 392.判断子序列 这道题目算是 编辑距离问题 的入门题目(毕竟这里只是涉及到减法),慢慢的,后面就要来解决真正的 编辑距离问题了https://p…

[C#]使用C#部署yolov8-seg的实例分割的tensorrt模型

【测试通过环境】 win10 x64 vs2019 cuda11.7cudnn8.8.0 TensorRT-8.6.1.6 opencvsharp4.9.0 .NET Framework4.7.2 NVIDIA GeForce RTX 2070 Super 版本和上述环境版本不一样的需要重新编译TensorRtExtern.dll&#xff0c;TensorRtExtern源码地址&#xff1a;TensorRT-CShar…

【豆伴匠】L1-L12更新完,一站式解决文史积累、阅读、写作难题,弯道超车,寒假必备

合抱之木&#xff0c;生于毫末&#xff1b; 九层之台&#xff0c;起于垒土&#xff1b; 千里之行&#xff0c;始于足下。 豆伴匠是什么&#xff1f; 豆伴匠内容包括&#xff1a;人、文、史、作四个模块&#xff0c;全面覆盖文史知识及读写技巧。 目前&#xff0c;豆伴匠有L…

【408真题】2009-24

“接”是针对题目进行必要的分析&#xff0c;比较简略&#xff1b; “化”是对题目中所涉及到的知识点进行详细解释&#xff1b; “发”是对此题型的解题套路总结&#xff0c;并结合历年真题或者典型例题进行运用。 涉及到的知识全部来源于王道各科教材&#xff08;2025版&…

[C++]红黑树

一、概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或 Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路 径会比其他路径长出俩倍&#xff0c;因而是…

每日一读: 硬件网卡tx支持哪些功能特性offload(ixgbe驱动为例)

ixgbe驱动 rte_eth_dev_info_get -> ixgbe_dev_info_get -> ixgbe_get_tx_port_offloads uint64_t ixgbe_get_tx_port_offloads(struct rte_eth_dev *dev) {uint64_t tx_offload_capa;struct ixgbe_hw *hw IXGBE_DEV_PRIVATE_TO_HW(dev->data->dev_private);tx_…

CIM分级

定义 以建筑信息模型&#xff08;BIM&#xff09;、地理信息系统&#xff08;GIS&#xff09;、物联网&#xff08;IoT&#xff09;等技术为基础&#xff0c;整合城市地上地下、室内室外、历史现状未来多维多尺度信息模型数据和城市感知数据&#xff0c;构建起三维数字空间的城…

c/c++:离开停车场

题目描述(题目链接&#xff09; 你被困在一个多层停车场。您的任务是仅使用楼梯离开停车场。出口总是在一楼的右下角。 创建一个采用矩阵的函数&#xff0c;其中&#xff1a; 0 表示免费停车位。 1 表示楼梯。 2 表示您的起始位置&#xff0c;可以在停车场的任何一层。 出口总…

面试问到Spring中的@Autowired注解,可以这样答

前言 在Spring框架中&#xff0c;依赖注入是一个核心概念&#xff0c;它允许将一个对象的依赖关系外部化并由Spring容器来管理。Autowired注解是实现这一点的关键工具之一。当然&#xff0c;这块知识也是面试官们老生常谈的问题。 下面就跟着博主的步伐&#xff0c;一起来探讨…

GCANet去雾算法

目录 1. 引言 2. 门控上下文注意机制&#xff08;GCA&#xff09; 3. 去雾流程 4. 模型代码 5. GCANet的优势 6. 去雾效果 1. 引言 GCANet(Gate-Controlled Attention Network)是一种用于图像去雾的深度学习算法&#xff0c;通过引入注意力机制来改进传统的去雾方法&…

C#实现纳秒级的计时器功能

常用的 Windows API 方法 GetTickCount() 返回系统启动后经过的毫秒数。另一方面&#xff0c;GetTickCount() 函数仅有 1ms 的分辨精度&#xff0c;精度也很不好。 我们要另外寻找一种方法来精确测量时间。 Win32 API 使用 QueryPerformanceCounter() 和 QueryPerformanceFre…

大模型场景应用汇总(持续更新)

一、应用场景 1.办公场景 智能办公&#xff1a;文案生成&#xff08;协助构建大纲优化表达内容生成&#xff09;、PPT美化&#xff08;自动排版演讲备注生成PPT&#xff09;、数据分析&#xff08;生成公式数据处理表格生成&#xff09;。 智能会议&#xff1a;会议策划&…

P10442 「MYOI-R3」字符串

「MYOI-R3」字符串 题目描述 给定字符串 s , t s,t s,t。 现在你要在 s , t s,t s,t 中删除一些字符并将它们重新排列使 s t st st。 问操作后的 ∣ s ∣ |s| ∣s∣&#xff08;即字符串 s s s 的长度&#xff09;最大是多少&#xff1f; 输入格式 第一行一个字符串…

深入探索 MongoDB:高级索引解析与优化策略

MongoDB 是一种非常流行的 NoSQL 数据库&#xff0c;它支持丰富的索引类型和功能&#xff0c;以提高数据查询的效率和性能。本文将详细介绍 MongoDB 的高级索引&#xff0c;包括基本语法、常用命令、示例、应用场景、注意事项和总结。 基本语法 在 MongoDB 中&#xff0c;可以…