分支循环结构

分支结构

v-if
v-else
v-else-if 控制元素是否显示到dom中
v-show

v-if 和v-show的区别

v-if是通过判断 来在dom树中添加删除结点

<div id="app">
        <div v-show='score==100'>满分</div>
        <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>
</div>

v-show是一直存在于dom树中 改变style中的display属性

v-if和v-show都是用来控制元素的渲染。v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用
v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

循环结构

循环数组/数组对象

1.Item是当前的数据 in是关键字 fruits 是要循环的数组

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

2.Item是当前数据 index是索引号 in是关键字 fruits是要循环的数组

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

3.可以用此api来循环复杂的数据 数组对象
数组

data{
	myFruit:[{cname:’苹果’,ename:’apple’},{cname:’香蕉’,ename:’banana’}]
}

js代码

<li v-for= ' item in myFruits ' > 
<span>{{item. ename}}</span>
<span>-----</ span>
<span>{{item. cname}}</span>
</li>

循环对象

value是值、key是键、 index是索引

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

v-for 可以和v-if结合使用

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