Vue的学习之路九:v-for
<body><div id="app"><!-- <p>{{list[0]}}</p><p>{{list[1]}}</p><p>{{list[2]}}</p><p>{{list[3]}}</p><p>{{list[4]}}</p><p>{
·
<body>
<div id="app">
<!-- <p>{{list[0]}}</p>
<p>{{list[1]}}</p>
<p>{{list[2]}}</p>
<p>{{list[3]}}</p>
<p>{{list[4]}}</p>
<p>{{list[5]}}</p> -->
<!-- <p v-for="item in list">{{ item }}</p> -->
<!-- <p v-for="(item, i) in list">索引值:{{ i }}---每一项:{{ item }}</p> -->
<!-- <p v-for="(item, i) in objList">索引值:{{ i }}---id值:{{ item.id }}---名字:{{ item.name }}</p> -->
<!-- 注意:在遍历对象身上的键值对时,除了 val, key,在第三个位置还有一个索引 -->
<!-- <p v-for="(val, key, i) in user">值:{{ val }}---键:{{ key }}---索引:{{ i }}</p> -->
<!-- in 后面放过 普通数组、对象数组、对象,还可以是数字 -->
<!-- 注意:如果使用 v-for 迭代数字的话,前面的 count 值从 1 开始 -->
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6],
objList: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' },
],
user: {
id: 1,
name: '托尼老师',
gender: '男',
},
},
methods: {},
})
</script>
</body>
这里学习v-for
指令
- 循环普通数组:
<p v-for="(item, i) in list">索引值:{{ i }}---每一项:{{ item }}</p>
- 循环对象数组:
<p v-for="(item, i) in objList">索引值:{{ i }}---id值:{{ item.id }}---名字:{{ item.name }}</p>
- 循环对象:第三个参数是索引:
<p v-for="(val, key, i) in user">值:{{ val }}---键:{{ key }}---索引:{{ i }}</p>
- 循环数字:
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
,注意:如果使用 v-for 迭代数字的话,前面的 count 值从 1 开始
更多推荐
已为社区贡献9条内容
所有评论(0)