标签：唯一性 name 列表 循环 key nextId id
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