- 在data中定義普通數組
- 在html中使用 v-for 指令渲染
<p v-for="(item,i) in list">--索引值--{{i}} --每一項--{{item}}</p>2.迭代對象數組
- 在data中定義對象數組
- 在html中使用 v-for 指令渲染
<p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p>3.迭代對象
- 在data中定義對象
- 在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>
截圖：
