分支结构
v-ifv-elsev-else-if这三种都是通过判断指的真和假，判断指定元素是否渲染到界面
<div v-if="score > 90">优秀</div> <div v-else-if="score < 90&&score > 80">良好</div> <div v-else-if='score< 80&&score> 60'> 一般</div> <div v-else>较差</div> data: { score:90 }, v-show根据表达式之真假值，切换元素的 display CSS 属性。 当条件变化时该指令触发过渡效果。
<div v-show="flag">测试</div> <button v-on:click="switcher()">show</button> data: { score:90, flag:false }, methods: { switcher:function(){ this.flag=!this.flag; // 控制元素是否显示的开关函数 }v-if与v-show的差别：
v-if控制元素是否渲染到界面v-show控制元素是否显示（已经渲染到了界面）从性能层面来考虑：
如果一个元素渲染出来之后，变动比较少，推荐使用v-if。v-if本质上渲染控制的是dom元素的增加与删除，性能开销较大
如果元素需要频繁隐藏，推荐使用v-show
循环结构
v-for遍历数组 <ul> <li v-for="item in fruits">{{item}}</li> <!-- 可以方便快速的将数组中元素进行相应填充 --> </ul> data: { fruits:['apple','banana','orange','pear'], },2.带索引的数组
<li v-for="(item,index) in fruits">{{item+"----"+index}}</li> <li v-for="item in myfruits"> <!-- 通过item属性取出对象的不同值 --> <span v-text="item.ename"></span> <span v-text="item.cname"></span> </li> data: { myfruits:[{ ename:"apple", cname:"苹果", },{ ename:"orange", cname:"橘子", }] }, key的作用：帮助vue区别不同的元素，从而提高性能key在处理Dom元素的时候，需要区分出兄弟节点之间彼此不一样的地方。比较好的办法就是给每个兄弟节点标注一个唯一标识（通过key属性，使key的都应当是唯一的），方便vue处理元素的渲染，提高性能。
为了提高性能，原则上在遍历的时候都应该加上key（不加也可以区分，但是性能偏低）
<li v-band:key="item.id" v-for="(item,index) in fruits">{{item+"----"+index}}</li> <!-- key的名称是固定的，item.id可以是任何唯一的值，如item.index也可 --> myfruits:[{ id:1, ename:"apple", cname:"苹果", },{ id:2, ename:"orange", cname:"橘子", }] v-for 遍历对象（不推荐遍历数组） <div v-for='(v,k,i) in obj'>{{v+"--"k+"--"+i}}</div> //v,k,i分别代表value，key和index，顺序不能错 var obj={ uname:'hhh', age:'21', gender:'female', } v-if 和 v-for结合使用用于实现满足条件才进行渲染
<div v-if="v==21" v-for='(v,k,i) in obj'>{{v+"--"k+"--"+i}}</div>