Vue指令之 v-for的使用
阿新 • • 發佈：2021-10-08
1.迭代普通陣列
- 在data中定義普通陣列
data:{
list:[1,2,3,4,5,6]
}
- 在html中使用 v-for 指令渲染
<p v-for="(item,i) in list">--索引值--{{i}} --每一項--{{item}}</p>
2.迭代物件陣列
- 在data中定義物件陣列
data:{ list:[1,2,3,4,5,6], listObj:[ {id:1, name:'zs1'}, {id:2, name:'zs2'}, {id:3, name:'zs3'}, {id:4, name:'zs4'}, {id:5, name:'zs5'}, {id:6, name:'zs6'}, ] }
- 在html中使用 v-for 指令渲染
<p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p>
3.迭代物件
- 在data中定義物件
data:{
user:{
id:1,
name:'託尼.賈',
gender:'男'
}
}
- 在html中使用 v-for 指令渲染
<p v-for="(val,key) in user">--鍵是--{{key}}--值是--{{val}}</p>
4.迭代數字
<!-- 注意：如果使用v-for迭代數字的話，前面 count 的值從 1 開始--> <p v-for="count in 10">這是第{{count}}次迴圈</p>
完整程式碼：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id='app'> <!--v-for迴圈普通陣列--> <p v-for="(item,i) in list">--索引值--{{i}} --每一項--{{item}}</p> <br/> <!--v-for迴圈物件陣列--> <p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p> <br/> <!--注意，在遍歷物件的鍵值對的時候，除了有 val 和 key,在第三個位置還有一個索引--> <p v-for="(val,key) in user">--鍵是--{{key}} --值是--{{val}}</p> <br/> <!-- in 後面我們放過陣列、物件陣列、物件，還可以放數字--> <!-- 注意：如果使用v-for迭代數字的話，前面 count 的值從 1 開始--> <p v-for="count in 10">這是第{{count}}次迴圈</p> </div> </body> <script src="vue.min.js"></script> <script> var vm = new Vue({ el:'#app', data:{ list:[1,2,3,4,5,6], listObj:[ {id:1, name:'zs1'}, {id:2, name:'zs2'}, {id:3, name:'zs3'}, {id:4, name:'zs4'}, {id:5, name:'zs5'}, {id:6, name:'zs6'}, ], user:{ id:1, name:'託尼.賈', gender:'男' } } }); </script> </html>