遍历循环数组:
v-for
<div id="app"> <p v-for="item in list">{{item}}</p> <p v-for="(item,i) in list">索引值:{{i}} --- 每一项: {{item}}</p> </div> <script> var vm = new Vue({ el:'#app', data:{ list:[1,2,3,4,5,6] } }) </script>
<div id="app"> <p v-for="item in list">Id: {{item.id}}---name: {{item.name}}</p> </div> <script> var vm = new Vue({ el:'#app', data:{ list:[ { id: 1, name:'zs1'}, { id: 2, name:'zs2'}, { id: 3, name:'zs3'}, { id: 4, name:'zs4'} ] } }) </script>
<div id="app"> <p v-for="(val,key) in user">值是:{{val}}----键是:{{key}}</p> </div> <script> var vm = new Vue({ el:'#app', data:{ user:{ id:1, name:'托尼,屎大颗', gender:'男' } } }) </script>
<div id="app"> <!--in 后面放普通数组 ,对象数组,对象,还可以放数字--> <!--注意:如果使用 v-for 迭代数字的话 前面的 count 值从1开始--> <p v-for="count in 10">这是第{{count}}次循环</p> </div> <script> var vm = new Vue({ el:'#app', data:{ } }) </script>