一,循环普通数组
- 1,创建Vue实例对象
<div id="app"> <p v-for="(item, i) in list">每一项值{{item}}---索引值为{{i}}</p> </div>
- 2,循环数据
<script> var vm = new Vue({ el: '#app', data: { list: [1, 2, 3] }, methods: {} }); </script>
- 结果
二,循环对象数组
- 创建Vue实例对象
<script> var vm = new Vue({ el: '#app', data: { list: [ {id: 1, name: 'zs1'}, {id: 2, name: 'zs2'} ] }, methods: {} }); </script>
- 循环对象数组
<div id="app"> <p v-for="(user, i) in list">id为{{user.id}}---name为{{user.name}}--索引值为{{i}}</p> </div>
- 结果
三,循环对象
- 创建Vue实例对象
<script> var vm = new Vue({ el: '#app', data: { user: { id: 1, name: 'zs', gender: 'male' } }, methods: {} }); </script>
- 循环对象
<div id="app"> <p v-for="(val, key, i) in user">值是{{val}}---键是{{key}}--索引值为{{i}}</p> </div>
- 结果
四,迭代数字
- 创建Vue实例对象
<script> var vm = new Vue({ el: '#app', data: {}, methods: {} }); </script>
- 循环数字
<div id="app"> <p v-for="count in 10">值是{{count}}</p> </div>
- 结果 注意:count从1开始