分支结构||分支循环结构||使用原生js遍历对象
生活随笔
收集整理的這篇文章主要介紹了
分支结构||分支循环结构||使用原生js遍历对象
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
分支循環結構
分支結構
v-show的原理：控制元素樣式是否顯示 display:none
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title></head> <body><div id="app"><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='flag'>測試v-show</div><button v-on:click='handle'>點擊</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {score: 90,flag: false},methods: {handle: function(){this.flag = !this.flag;}}});</script> </body> </html>分支循環結構
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title></head> <body><div id="app"><div>水果列表</div><ul><li v-for='item in fruits'>{{item}}</li> <hr><li v-for='(item, index) in fruits'>{{item + '---' + index}}</li> <hr><li :key='item.id' v-for='(item, index) in myFruits'><span>{{item.ename}}</span><span>-----</span><span>{{item.cname}}</span></li></ul></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*循環結構-遍歷數組*/var vm = new Vue({el: '#app',data: {fruits: ['apple', 'orange', 'banana'],myFruits: [{id: 1,ename: 'apple',cname: '蘋果'},{id: 2,ename: 'orange',cname: '橘子'},{id: 3,ename: 'banana',cname: '香蕉'}]}});</script> </body> </html>使用原生js遍歷對象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title></head> <body><div id="app"><div v-if="v=='female'" v-for='(v,k,i) in obj'>{{k + '---' + v + '---' + i}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*循環結構*/var vm = new Vue({el: '#app',data: {obj: {uname: 'zhangsan',age: 13,gender: 'female'}}});</script> </body> </html>
總結
以上是生活随笔為你收集整理的分支结构||分支循环结构||使用原生js遍历对象的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 案例：简单计算器|| 属性绑定||v-m
- 下一篇： Vue常用特性——表单操作、表单域修饰符