八个Vue中常用的v指令详解

2022-04-23

目录

Vue中常用的8种v指令

1 v-text 指令
2 v-html 指令
3 v-on 指令
案例：计数器
4 v-show 指令
5 v-if 指令
6 v-bind 指令

7 v-for 指令

8 v-on 补充

总结

Vue中常用的8种v指令根据官网的介绍，指令是带有 v- 前缀的特殊属性。通过指令来操作DOM元素

指令	功能
v-text=“变量/表达式”	文本的设置字符串变量+数字可以直接写是拼接字符串如果出现要使用外部不相同的引号
v-html=“变量”	文本或者页面的设置如果变量只是普通文本，作用和 v-text 相同如果变量是一个完整的标签字符串，则会解析成为html
v-on:click=“方法名” @click=“方法名”	绑定方法可以是无参方法，也可以是有参方法
v-show=“布尔值变量”	标签的显示和隐藏根据布尔值变量的真与假，将标签显示或隐藏
v-if=“布尔值变量”	标签的创建与销毁效果与 v-show 相同，但是频繁操作性能开销很大
v-for="item,index in arr" v-for=“item in arr”	数组的循环遍历将数组中的数据，索引进行遍历
v-bind:标签属性=“属性值” :标签属性=“属性值”	标签属性的绑定可以直接修改标签中的属性值
v-model=“变量值”	数据双向绑定变量值的修改会影响页面显示，页面变化也会影响变量值

1 v-text 指令
作用:

获取data数据, 设置标签的内容，以纯文本进行显示
v-text 会覆盖标签中的内容，如果想要拼接数据，可以直接在v-text中拼接
- 如果拼接的是数字：直接使用 “+”
- 如果拼接的是字符串，需要使用与外部不同的引号进行包裹内容

注意: 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容.

Document - 锐客网{{msg}}-云梦归遥-云梦归遥

文章图片

2 v-html 指令
作用:
可以当做 v-text 一样使用，显示普通文本
设置元素的 innerHTML (可以向元素中写入新的标签)

Document - 锐客网{{msg}}

文章图片

3 v-on 指令
作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click="方法

Document - 锐客网

{{msg}}

文章图片

案例：计数器

Document - 锐客网{{num}}{{result}}

文章图片

4 v-show 指令
作用: v-show 需要一个 boolean 类型的值，根据值的变化，进行标签的显示和隐藏
原理：修改 style 的display为 block 或 none，进行显示和隐藏

Document - 锐客网

文章图片

文章图片
18" style="width: 300px; height: 300px; ">

文章图片

5 v-if 指令
作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )
原理：会操作 DOM 元素，将元素删除或添加，而不是像 v-show 一样修改样式
使用场景：频繁切换使用 v-show，反之使用 v-if

Document - 锐客网

文章图片

6 v-bind 指令
作用: 设置元素的属性（比如：src，title，class，style传递json串）
一次只能修改一个属性

v-bind:属性名=“属性值”
:属性名

Document - 锐客网
文章图片

文章图片

文章图片

文章图片

7 v-for 指令作用: 根据数据生成列表结构，常与数组一起使用，进行遍历操作

v-for="item,index in arr1"
v-for="person in persons"

相关方法：

push（）：将元素追加进入数组
shift（）：将数组的起始元素删除

数组的长度变化,会同步更新到页面上,是响应式的

Document - 锐客网
第{{index + 1}}个同学: {{item}}
我是 {{person.name}}, 我今年 {{person.age}} 岁.

文章图片

8 v-on 补充
作用：

可以向函数传递参数
事件修饰符，可以制定哪些方式触发事件，比如说按键，回车等

Document - 锐客网
向主播狂刷{{num}}个{{gift}}

文章图片

总结 【八个Vue中常用的v指令详解】到此这篇关于八个Vue中常用的v指令详解的文章就介绍到这了,更多相关Vue常用v指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

推荐阅读

上一篇：一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

下一篇：MySQL|MySQL Router重装后重新连接集群进行引导出现的——此主机中之前已配置过的问题