v-for循环普通数组
<div id="app">
<p v-for="(item, i) in list">索引值: {{i}} --- 每一项: {{item}}</p>
</div>
<script>
//创建Vue实例,得到ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [1,2,3,4,5,6]
},
methods: {}
});
</script>
v-for循环对象数组
<div id="app">
<p v-for="user in list">Id: {{ user.id }} --- 名字: {{ user.name }}</p>
</div>
<script>
//创建Vue实例,得到ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [
{id:1, name: 'zs1'},
{id:2, name: 'zs2'},
{id:3, name: 'zs3'},
{id:4, name: 'zs4'},
]
},
methods: {
}
});
</script>
v-for循环对象
<div id="app">
<!--注意:在遍历对象身上键值对的时候,除了有val key,在第三个位置还有一个索引-->
<p v-for="(val, key, i) in user">值是: {{ val }} --- 键是: {{ key }} -- 索引: {{i}}</p>
</div>
<script>
//创建Vue实例,得到ViewModel
var vm = new Vue({
el: '#app',
data: {
user:{
id:1,
name: 'wxy',
gender: '男'
}
},
methods: {
}
});
</script>
v-for迭代数字
<div id="app">
<!--in后面还可以放数字-->
<!--如果使用v-for迭代数字的话,前面的count值从1开始-->
<p v-for="count in 10">这是第{{ count }}次循环</p>
</div>
<script>
//创建Vue实例,得到ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>