一、分支循环结构

1.1 分支结构

• v-if
• v-else
• v-else-if
• v-show

v-if、 v-else、 v-else-if这三个使用的方法和js里面的if 、else if、else的使用方法其实一样的；v-show其实和v-show差不多。

1.2 v-if与v-show的区别

• v-if控制元素是否渲染到页面
• v-show控制元素样式是否显示（已经渲染到页面）

如果我们要让一个元素频繁的显示或隐藏，我们推荐用v-show；如果希望元素渲染出之后变化的比较少我们推荐用v-if。v-if其实是控制DOM元素的，消耗性能比较大，我们最好还是使用v-show。

二、循环结构

• v-for遍历数组

<li v-for="item in fruits">{{item}}</li>

item是自己起的名字表示一项数据，后面{{}}的值要和自己起的名字一样，in是关键字, fruits对应的属性名（你要遍历的数据即fruits数组)。

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

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

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

如果没有id，则可以用索引
:key=‘index’

• v-for遍历对象

<div v-for="(value,key,index) in obj">{{value+'---'+key+'---'+index}}</div>

value、key、index的名字可以改变，但是它们3个的位置不能改变，这里用插值表达式{{}}来显示输出内容。

• v-if和v-for结合使用

<div v-if="value==13" v-for="(value,key,index) in obj">{{value+'---'+key+'---'+index}}</div>

当value值等于13时才会显示value值，不满足时不显示

从现在开始vue模板语法完事了！！！