vue中key
2024-10-22 04:59:26
使用key维护列表的状态
当列表的数据变化时,默认情况下,vue尽可能的服用已存在的DOM元素,从而提升渲染的性能。但这种默认的性能优化策略,会导致由状态的列表无法被正确更新。
key的使用注意事项:
1、key的值必须是string、number
2、key的值必须具有唯一性
3、建议把数据项的id属性的值作为key的值
4、使用index的值作为key的值没有意义
5、建议使用v-for指令的时候一定要指定key的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="username">
<button @click="addUserName">添加</button>
</div>
<ul>
<li v-for="user in userlist" :key="user.id">
<input type="checkbox">
姓名:{{ user.name}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
userlist:[{id:1,name:'sz'},{id:2,name:'sd'},{id:3,name:'se'}],
username:'',
nextId: 4,
},
methods:{
addUserName: function (){
if(!this.username) return alert('名称不能为空')
this.userlist.push({
id: this.nextId,
name: this.username
}),
this.nextId ++
}
}
})
</script>
</body>
</html>
参考:https://www.zhihu.com/question/61064119
最新文章
- centos7.0 安装redis集群
- EF-InvalidOperation系列
- 我的第二个FluentNHibernate例子with Knockout
- js添加确认删除操作注意事项
- jquery中.attr(&#39;value&#39;)和.val()的区别
- Objective-C 高性能的循环遍历 forin - NSEnumerator - 枚举 优化
- Light oj 1100 - Again Array Queries (鸽巢原理+暴力)
- C#操作Excel(2)-- 打开-读取Excel文档
- InvocationTargetException
- 如何使用Linux通用后门(转zafe)
- HDOJ 1196 Lowest Bit(二进制相关的简单题)
- Eclipse用法和技巧二十一:工程的展示途径
- workday2
- 线程UI同步
- 设计模式的征途—12.享元(Flyweight)模式
- Java面试题积累
- 一次 HashSet 所引起的并发问题
- 什么是nrm
- go日常问题记录
- SQLite中的WAL机制详细介绍-与回滚日志原理
热门文章
- Mac OS 如何批量转换图片格式
- win10安装双版本mysql的方法
- Selinux讲解
- ubuntu16.04编译LAPACK3.7.1出错
- Ubuntu之切换root用户提示认证失败
- Microsoft Project 使用教程
- 直播软件源码,uniapp滚动条置顶实现
- 报错解决OSError: /lib64/libm.so.6: version `GLIBC_2.27&#39; not found
- java写 变量到文件
- MAYA专用卸载工具,完全彻底卸载删除干净maya各种残留注册表和文件的方法和步骤