Vue学习笔记 —— 常用指令（v-show、v-if、v-for）

常用指令

v-show
根据表达式之间的真假值，切换元素的display:block/none
控制该元素是否显示，会占dom节点，但是不会占页面的位置。

v-if
条件渲染指令，根据表达式的真假来删除和插入元素

（PS：六大假值：nan、0、false、undefined、null）

v-else必须与v-if或者v-else-if同时使用

v-show与v-if的区别：
1、v-show本质就是标签display设置为none，控制隐藏
2、v-if是动态的向DOM树内添加或者删除DOM元素
3、v-if可以用到template上，v-show不能用到template上

v-for
遍历
写法：
在表达式中，persons是数据，person是当前的一条数据， index代表当前索引值。列表渲染也可以用 of 来代替 in 作为分隔符。

<li v-for="（person, index） in persons"> {{ person.name }} </li>

当遍历对象属性时候，有两个可选参数，分别键名(key)和索引值(index)。

<li v-for="（val, key,  index） in persons"> {{ person.index }} - {{ person.key }}: {{ person.val }} </li>

当遍历数字的时候，前面 count 的值从 1 开始

<p v-for="count in 10">{{count}}</p>

v-for为什么要加key?
vue中列表循环需加:key=“唯一标识” 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM
(https://www.jianshu.com/p/4bd5e745ce95)