vue之回顾条件/列表渲染指令

//今天回顾一下vue的几种指令的用法

(1) v-if

在Vue中可以使用v-if来控制模板里元素的显示和隐藏，值为true就显示，为false就隐藏

v-if控制的是 是否渲染这个节点

(2) v-else v-else-if

当有else分支逻辑的时候，可以给该元素加上v-else指令来控制，v-else会根据上面的那个v-if来控制，效果与v-if相反，注意，一定要紧挨着

还有v-else-if指令可以实现多分支逻辑

(3) template v-if

当我们需要控制一组元素显示隐藏的时候，可以用template标签将其包裹，将指令设置在template上，等vm渲染这一组元素的时候，不会渲染template

(4) v-show

Vue还提供了v-show指令，用法和v-if基本一样，控制的是元素的css中display属性，从而控制元素的显示和隐藏 ， 不能和v-else配合使用,且不能使用在template标签上，因为template不会渲染，再更改它的css属性也不会渲染，不会生效

v-if vs v-show

v-if 是只有当条件为真时,才会开始渲染
v-show 是不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。(display:none/block)

(5) v-for

​ 在vue中可以通过v-for来循环数据的通知循环dom，语法是item in/of items，第一个参数是子元素item ,第二个参数是索引 (item,index) of items

还可以遍历对象，第一个参数是value，第二个是key，第三个依然是索引
//在原生js中 for in 是通过index遍历,而for of是通过子元素遍历,在这里 for in/of第一个参数都是子元素,第二个参数为索引

好好学习，天天向上。中国加油，武汉加油，千峰加油！