vue v-for循环中key属性的使用
<!DOCTYPE html>
<html lang="en"> <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>
<script src="./lib/vue-2.4.0.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> <!-- 注意: v-for 循环的时候,key 属性只能使用 number获取string -->
<!-- 注意: key 在使用的时候,必须使用 v-bind 属性绑定的形式,指定 key 的值 -->
<!-- 在组件中,使用v-for循环的时候,或者在一些特殊情况中,
如果 v-for 有问题,必须 在使用 v-for 的同时,指定 唯一的 字符串/数字 类型 :key 值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
</div> <script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '嬴政' },
{ id: 3, name: '赵高' },
{ id: 4, name: '韩非' },
{ id: 5, name: '荀子' }
]
},
methods: {
add() { // 添加方法
this.list.unshift({ id: this.id, name: this.name })
}
}
});
</script>
</body> </html>
vue v-for循环中key属性的使用的更多相关文章
- vue 如何在循环中 "监听" 的绑定v-model数据
vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. ...
- Vue指令之`v-for`和`key`属性
2.2.0+ 的版本里,**当在组件中使用** v-for 时,key 现在是必须的. 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “**就地复用**” 策略.如果数据项 ...
- Vue学习笔记【9】——Vue指令之v-for和key属性
迭代数组(普通数组.对象数组) <ul> <li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name ...
- 理解vue中v-for循环中得key原理及一些错误
作用:给节点做一个标识,相当于人类的身份证号,虚拟DOM中的标识 下列是key值的一些使用场景和带来的问题: js: const vm = new Vue({ el: ...
- react中map循环中key取值问题
数组中没有唯一的key,可以定义变量,拼接字符串连接. let i = 0; key={`infoItem-col-${i++}`}
- VUE router-view key 属性解释
router-view 作用, 你可以 router-view 当做是一个容器,它渲染的组件是你使用 vue-router 指定的. <template> <section clas ...
- Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次
key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...
- vue(5)—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- vue里v-for下的key的作用
将v-for的元素赋予唯一的key属性,则会打破‘就地复用原则’: 这个就地复用原则是指 如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确 ...
随机推荐
- elipse egit的使用
- python 对位运算
- JSP Web第三章整理复习 开发环境搭建
P86 WEB工作原理 用户使用浏览器通过HTTP协议请求服务器上的Web资源,服务器接收到该请求后,读取请求的URI所标识的资源,加上其他资源发送给客户端的浏览器,浏览器解析响应中的HTML数据, ...
- Asterisk项目概述
Asterisk是一个开源的软件包,通常运行在Linux操作系统平台上.Asterisk可以用三种协议来实现VoIP,同时可以与目前电话使用的标准硬件进行交互通信,Asterisk在实现VoIP时,不 ...
- TCP/IP协议学习
计算机网路学得不好,首先先放个OSI七层网络模型吧 在协议的控制下,上层对下层进行调用,下层对上层进行服务, 上下层间用交换原语交换信息.这样可以提高传输速率,并且保证数据安全,所以说其实每一层都有存 ...
- PLAY2.6-SCALA(十) 模板引擎Twirl
一.语法 1.@ 它是一个特殊的字符,表示动态声明的开始.对于简单的动态声明结尾可以从代码块中自动推断结尾,对于复杂的表达式通常加上() Hello @(customer.firstName + cu ...
- node.js(连接mysql)
mysql语句中的SQL sql语句中的分类: ---DDL:(data define language)定义数据列(create,drop,alter,truncate) ---DML:(data ...
- execute和submit的区别与联系
execute和submit都属于线程池的方法,execute只能提交Runnable类型的任务,而submit既能提交Runnable类型任务也能提交Callable类型任务. execute会直接 ...
- python 解释器编码
- vuex之仓库数据的设置与获取
如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,那么接下来我们就来学习 ...