常见的vue指令:v-for、v-bind、v-if与v-show

1,695 阅读1分钟

什么是指令

vue提供了指令(directive)功能,这些指令都是以v-开头,它们从形式上来看是标签的自定义属性(只不过是由vue提供的)

image.png

v-for

作用:渲染数据
语法:<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>
示例: image.png image.png

索引或属性名可以省略不写,如果需要渲染的数据里面有唯一标识,唯一值直接使用唯一标识即可。如果没有唯一标识就可以使用索引,这种情况下索引是不能省略的

v-bind

作用:动态绑定标签上的属性的值。(标签上的属性值不能使用插值表达式来设置)
语法<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
v-bindy指令也可以直接使用 : 来简写 <元素 :属性名1="值1" :属性名2="值2"></元素>

v-show与v-if

由于这两个指令的功能是作用是一样的,所以放在一起说明

作用:这两个指令都是用来控制标签的可见与不可见
语法:<标签 v-show="vue变量" /> <标签 v-if="vue变量" />
如果vue变量的值为true,就可见,否则就不可见
示例:

image.png image.png
两者的不同点:
1.原理不同
v-show 用的display:none隐藏 v-if  直接从DOM树上添加或移除
image.png image.png
可以看出v-show为false时,是通过修改来让标签是否可见,而v-if都不会创建标签
image.png image.png
v-if为true时才会创建标签