key的注意事项
- key的值只能是
字符串
或数字
类型 - key的值
必须具有唯一性
(即:key的值不能重复) - 建议把
数据项id属性的值
作为key的值(因为id属性的值具有唯一性) - 使用
index的值
当作key的值没有任何意义
(因为index的值不具有唯一性) - 建议使用v-for指令时
一定要指定key的值
(即提升性能、又防止列表状态紊乱)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
<div id="app">
<!-- 添加用户的区域 -->
<div>
<input type="text" v-model="name">
<button @click="addNewUser">添加</button>
</div>
<!-- 用户列表区域 -->
<ul>
<li v-for="(user, index) in userlist" :key="user.id">
<input type="checkbox" />
姓名:{{user.name}}
</li>
</ul>
</div>
<script src="lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
// 用户列表
userlist: [
{ id: 1, name: 'zs' },
{ id: 2, name: 'ls' }
],
// 输入的用户名
name: '',
// 下一个可用的 id 值
nextId: 3
},
methods: {
// 点击了添加按钮
addNewUser() {
this.userlist.unshift({ id: this.nextId, name: this.name })
this.name = ''
this.nextId++
}
},
})
</script>
</body>
</html>
标签:唯一性,name,列表,循环,key,nextId,id
From: https://www.cnblogs.com/yang-young-young/p/17462060.html