1、v-for循环普通数组、对象数组、对象、迭代数字、key的使用和注意事项
2、in 后面我们放过 普通数组，对象数组，对象，还可以放数字
3、注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始
4、注意：v-for 循环的时候，key 属性只能使用 number获取string
5、注意：key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值
6、在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值
<body>
<div id="app">
<span v-for="item in list">{{item}}</span>
<h3 v-for="(item,i) in list">索引值是：{{i}}------每一项是：{{item}}</h3><!-- 循环数组 -->
<h4 v-for="(user,h) in list2">索引值是：{{h}}------每一项是：{{user.name}}</h4><!-- 循环数组对象 -->
<h4 v-for="(val,key,k) in user">值是：{{val}}------键是：{{key}}-------索引是:{{k}}</h4><!-- 循环对象 -->
<!-- in 后面我们放过 普通数组，对象数组，对象，还可以放数字 -->
<!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
<h4 v-for="count in 10">这是第{{count}}循环</h4><!-- 迭代数字 -->
<div>
<label for="">ID:
<input type="text" v-model="id">
</label>
<label for="">Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="pus">
</div>
<!-- 注意：v-for 循环的时候，key 属性只能使用 number获取string -->
<!-- 注意：key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
<!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在 -->
<!-- 使用v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
<p v-for="xh in list2" :key="xh.id">
<input type="checkbox">
ID:{{xh.id}}--------Name:{{xh.name}}
</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:[1,2,3,4,5,6,7],
list2:[
{id:1,name:'云浅月'},
{id:2,name:'荣景'},
{id:3,name:'夜轻染'},
{id:4,name:'夜天逸'},
{id:5,name:'玉子书'}],
user:{
id:1,name:"马大褂",age:54,sex:"女",eat:"蛋炒饭"
}
},
methods:{
pus(){
this.list2.push({id:this.id,name:this.name})
}
}
});
</script>
版权声明：本文为qq_46179813原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。