什么是指令
vue提供了指令(directive)功能,这些指令都是以v-开头,它们从形式上来看是标签的自定义属性(只不过是由vue提供的)
v-for
作用:渲染数据
语法:<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>
示例:
索引或属性名可以省略不写,如果需要渲染的数据里面有唯一标识,唯一值直接使用唯一标识即可。如果没有唯一标识就可以使用索引,这种情况下索引是不能省略的
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,就可见,否则就不可见
示例:
两者的不同点:
1.原理不同
v-show 用的display:none隐藏
v-if 直接从DOM树上添加或移除
可以看出v-show为false时,是通过修改来让标签是否可见,而v-if都不会创建标签
v-if为true时才会创建标签