迴圈使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數據數組並且 site 是數組元素迭代的別名。 v-for 可以綁定數據到數組來渲染一個列表： <!DOCTYPE html> <html> <head> <meta charset= ...
迴圈使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數據數組並且 site 是數組元素迭代的別名。
v-for 可以綁定數據到數組來渲染一個列表：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <ol> <li v-for="site in sites"> {{site.name}} </li> </ol> </div> <script> new Vue({ el: '#demo', data: { sites:[ {name:"cyy1"}, {name:"cyy2"}, {name:"cyy3"} ] }, methods:{ }, filters:{//過濾器 } }) </script>
模板中使用 v-for：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <ul> <template v-for="site in sites"> <li>{{site.name}}</li> <li>-----------</li> </template> </ul> </div> <script> new Vue({ el: '#demo', data: { sites:[ {name:"cyy1"}, {name:"cyy2"}, {name:"cyy3"} ] }, methods:{ }, filters:{//過濾器 } }) </script>
v-for 可以通過一個對象的屬性來迭代數據：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <ul> <li v-for="obj in object"> {{obj}} </li> </ul> </div> <script> new Vue({ el: '#demo', data: { object:{ name:"cyy1", age:25, sex:"girl" } }, methods:{ }, filters:{//過濾器 } }) </script>
也可以提供第二個的參數為鍵名：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <ul> <li v-for="(obj,key) in object"> {{key}}:{{obj}} </li> </ul> </div> <script> new Vue({ el: '#demo', data: { object:{ name:"cyy1", age:25, sex:"girl" } }, methods:{ }, filters:{//過濾器 } }) </script>
第三個參數為索引：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <ul> <li v-for="(obj,key,index) in object"> {{index}}.{{key}}:{{obj}} </li> </ul> </div> <script> new Vue({ el: '#demo', data: { object:{ name:"cyy1", age:25, sex:"girl" } }, methods:{ }, filters:{//過濾器 } }) </script>
v-for 也可以迴圈整數
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <ul> <li v-for="n in 10"> {{n}} </li> </ul> </div> <script> new Vue({ el: '#demo', data: { }, methods:{ }, filters:{//過濾器 } }) </script>
