前端框架Vue学习03——v-for指令与key属性

最新推荐文章于 2024-03-27 20:09:56 发布

非正式搬砖工

最新推荐文章于 2024-03-27 20:09:56 发布

阅读量528

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37607502/article/details/102424291

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1、遍历普通数组

<body>
	<div id="app">
        <p v-for="item in list">{{item}}</p>
        <hr>
        <p v-for="(item,i) in list">数组索引：{{i}}---数组每一项：{{item}}</p>
	</div>	
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				list:[1,2,3,4,5,6]
			},
			methods:{}
		});
	</script>
</body>

在这里插入图片描述上述代码块中{{item}}这里的item指的是list中的元素，结果如图中第一种输出方式。数组索引：{{i}}---数组每一项：{{item}}这里的（item,i）形式,表示i为索引，item为数组元素。
2、遍历对象数组

<body>
	<div id="app">
        <!-- <p v-for="item in list">{{item}}</p>
        <hr> -->
        <p v-for="user in list">ID：{{user.id}}---名字：{{user.name}}</p>
	</div>	
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				list:[
                    {id:1,name:'zhangsan'},
                    {id:2,name:'lisi'},
                    {id:3,name:'wangwu'}
                ],
			},
			methods:{}
		});
	</script>
</body>

结果为：在这里插入图片描述
对象的索引使用方法
3、循环遍历对象
一般对象都是由“value：key”的组成形式，遍历的话和之前的也是大同小异。
在这里，顺序不要搞错，一般都是value在前，key在后。当然这里也是可以添加索引的，即（val,key,i）i即为索引。最终结果为：
在这里插入图片描述
4、迭代数字

5、循环中key值的使用
一般情况下，我们需要选定循环中的某一项，默认选中的是其索引，而非某一项。来看下面的问题：选中list中某一个元素后，需要在list开头添加元素。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vueDemo01</title>
	<!--导入vue的包 -->
	<script src="./lib/vue.js"></script>
</head>
<body>
	<div id="app">
        <div>
            <label>ID:
                <input type="text" v-model="id">
            </label>
            <label>name:
                    <input type="text" v-model="name">
            </label>
            <input type="button" value="添加" @click="add">
        </div>    
		<p v-for="item in list" >
            <input type="checkbox">
            {{item.id}}-----{{ item.name }}
        </p>
	</div>	
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				list:[
                    {id:1,name:'李斯'},
                    {id:2,name:'嬴政'},
                    {id:3,name:'赵高'},
                    {id:4,name:'韩非'},
                ]
			},
			methods:{
                add(){
                    // his.list.push({id:this.id,name:this.name})
                     this.list.unshift({id:this.id,name:this.name})
                }
            }
		});
	</script>
</body>
</html>

结果：
在这里插入图片描述
当添加一个元素后

选中的已经是list中更新的第一项，而非我们希望的一项。此时需要用到key绑定。

 <!-- 注意v-for 循环的时候，key属性只能使用number获取string或者string-->
        <!-- key使用的时候，必须用v-bind属性绑定 ，指定key的值-->
		<p v-for="item in list" v-bind:key="item.id">
            <input type="checkbox">
            {{item.id}}-----{{ item.name }}
        </p>

现在就可以解决这个问题。