# 6、分支循环结构 3.7分支循环结构 1.分支结构 // html div 书写 判断是否满足 满足则显示 ~~~ ●v-if ●v-else ●v-else-if ● v-show // v-show的原理:控制元素样式是否显示display: none ~~~ ~~~ <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> ~~~ 2. v-if与v-show的区别 ● v-if 控制元素**是否渲染到页面** ● v-show 控制元素**是否显示**(**已经渲染到了页面**) ## 3.循环结构 ● v-for遍历数组 （然后渲染到页面的） ~~~ 1、<li v-for='item in list'>{{item}}</li> 2、<li v-for=' (item, index) in list'>{{item}} + '---' +{{index}}</li> ~~~ ~~~ 1、<div>水果列表</div> <ul > // item 自定义的（写在 {{ 填充内容}}） in 关键字 fruits 下面数组名字 <li v-for='item in fruits'>{{item}}</li> < /ul> data: { fruits:[' apple',' orange',' banana' ] } ~~~ 显示结果 ~~~ 水果列表 ●apple ●orange ●banana ●apple---0 ●orange---1 ●banana---2 ~~~ ● key的作用:帮助Vue区分不同的元素,从而提高性能 ~~~ <li :key='item.id' v-for=' (item, index) in list'>{{item}} + '---' {{index}}</li> ~~~ ~~~ <li v-for= ' item in myFruits' > <span>{{item. ename}}</span> <span>-----</span> <span>{{item. cname}}</span> </li> // 数据 var Vm = new Vue({ el: ' #app', data: { myFruits:[{ id:1, ename :'apple' cname:'苹果' },{ id:2, ename :orange' , cname: ' 橘子' }]} ~~~ ## ● 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> ~~~ 循环代码 ~~~ <div id="app"> <div v-if='v==13k v-for='(v,k,i) in obj'>{{v + '---’+ k + '---' + i}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> //使用原生js遍历对象 varobj={ uname :'lisi', age: 12, gender:' male " for(var key in obj) { console.log(key, obj[key]) } /* 循环结构 */ var Vm = new Vue({ el: ' #app', data: { obj: { uname:' zhangsan' , age: 13, gender: ' female ' } }); </script> ~~~