VUE之v-for循环、key的使用和注意事项

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版权协议,转载请附上原文出处链接和本声明。