vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM；
没有绑定key是这样的：
绑定了key的效果：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="lodash.min.js"></script>
<style>
.userList{
border: 1px solid seagreen;
padding: 10px 20px;
margin: 10px 0;
}
</style>
</head>
<body>
<div id="app"> </div>
<template id="my-com">
<div class="userList" :id="obj.id" >
<h4>武将:{{obj.name}}</h4>
<p>简介:{{obj.content}}</p>
<div class="input-group">
<input type="text" class="form-control" placeholder="来将可留姓名" >
</div>
</div>
</template>
<script type="text/javascript">
Vue.component('my-com',{
template:'#my-com',
props:{//传值
obj:Object
}
})
var App = {
data(){
return {
datas:[
{id:1,name:'吕布',content:'我是吕布'},
{id:2,name:'赵云',content:'我是赵云'},
{id:3,name:'典韦',content:'我是典韦'},
{id:4,name:'关羽',content:'我是关羽'},
{id:5,name:'马超',content:'我是马超'},
{id:6,name:'张飞',content:'我是张飞'},
]
}
},
template:'<div class="container"><h4>key的作用主要是是为了高效的更新虚拟DOM</h4><button @click="change" class="btn btn-success">改变顺序</button><my-com v-for="(item,index) in datas" :obj="item" :key="item.id"></my-com></div>',
methods: {
change(){
this.datas = _.shuffle(this.datas);
}
},
}
new Vue({
el:'#app',
components:{
App
},
template:'<App></App>'
})
</script>
</body>
</html>
<!-- 如果for循环时不给 不给每个元素 添加key，点击打乱顺序时，会出现 元素与内容对应不上的
添加key，就不会出现打乱节点的情况 -->