vue学习之循环结构（十）

1、分支结构

相关指令：v-if、v-else、v-else-if、v-show

v-if与v-show的区别：v-if控制元素是否渲染到页面，v-show控制元素是否显示（已经渲染到了页面）

2、分支循环结构

<li v-for='item in list'>{{item}}</li>

<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>

     key的作用：帮助Vue区分不同的元素，从而提高性能

     <li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>

 

v-for遍历对象

<div v-for='(value, key, index) in object'></div>

 

v-if和v-for结合使用

<div v-if='value==12' v-for='(value, key, index) in object'></div>