DOVE-----Vue.js框架入门（二）

第二周学习内容整理（7.13）

模板语法

8、分支循环结构

• 分支结构
  （1） v-if
  （2） v-else
     ~~   (3) v-else-if
     ~~   (4) v-show: v-show原理：控制元素样式是否显示 display：none
• v-if 与v-show 的区别
  （1）v-if 控制元素是否渲染到页面
  （2）v-show 控制元素是否显示（已经渲染到页面）
• v-for 遍历数组

<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>