黑马vue---19、v-for中key的使用注意事项
黑马vue---19、v-for中key的使用注意事项
一、总结
一句话总结：
必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值
<p v-for="item in list" :key="item.id">
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '嬴政' },
{ id: 3, name: '赵高' },
{ id: 4, name: '韩非' },
{ id: 5, name: '荀子' }
]
二、内容在总结中
<!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---19、v-for中key的使用注意事项的更多相关文章
- Vue学习之路第十四篇：v-for指令中key的使用注意事项
1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...
- 第二章 Vue快速入门-- 18 v-for中key的使用注意事项
注意:如果属性和方法还没定义直接使用的话,就会报 xxx is not defined 导致界面不能正常显示.我看视频教程里老师的可以直接使用,而且界面正常显示,可能是vue版本不同吗?还不清楚 ...
- Vue main.js 文件中全局组件注册部分
在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...
- Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现（2022/7/13）
文章目录 1.基本列表 1.1 基本知识 1.2 代码实例 1.3 测试效果 2.key的原理 2.1基本知识 2.2 代码实例 2.3 测试效果 2.4 原理图解 3.列表过滤 3.1 代码实例 3 ...
- vue中：key 和react 中key={} 的作用，以及ref的特性？
vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...
- Springboot 之 自定义配置文件及读取配置文件注意:配置文件中的字符串不要有下划线 .配置中 key不能带下划线,value可以(下划线的坑,坑了我两天..特此纪念)
注意:配置文件中的字符串不要有下划线 .配置中 key不能带下划线,value可以 错误的.不能读取的例子: mySet .ABAP_AS_POOLED = ABAP_AS_WITH_P ...
- json字符串中key值下划线命名转换为驼峰命名
json字符串中key值下划线命名转换为驼峰命名: 例如: 原json串: String json= "{'user_name':'ok','user_sex':0,'object_info ...
- Oracle基础学习（二）v$session中Command的数字含义
v$session中Command的数字含义. 1 CREATE TABLE 2 INSERT 3 SELECT 4 CREATE CLUSTER 5 ALTER CLUSTER 6 UPDATE 7 ...
- 如何在vue单页应用中使用百度地图
作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...
随机推荐
- vue 实现textarea展示时自动换行
利用 v-html 展示 str.replace(/\n|\r\n/g, '<br>') 数据 完美解决
- Asp .Net Core 2.0 登录授权以及前后台多用户登录
用户登录是一个非常常见的应用场景 .net core 2.0 的登录方式发生了点变化,应该是属于是良性的变化,变得更方便,更容易扩展. 配置 打开项目中的Startup.cs文件,找到Configur ...
- Python: NumPy, Pandas学习资料
NumPy 学习资料 书籍 NumPy Cookbook_[Idris2012] NumPy Beginner's Guide,3rd_[Idris2015] Python数据分析基础教程:NumPy ...
- 5. First-Class Functions
Function in python are first-class objects (runtime / element / argument / return) 1. Treating a Fun ...
- Linux下zookeeper安装及运行
zookeeper下载地址:http://archive.apache.org/dist/zookeeper/ 安装 第一步:安装 jdk(此步省略,我给大家提供的镜像已经安装好JDK) 第二步:把 ...
- kotlin变量基础
kotlin变量与输出 这里看一下在Kotlin中的变量是如何定义的? 编译运行: 对比下我们常用的JAVA语言,定义上的区别: 1.Kotlin变量是统一以var开头,而不区分具体类型,而Java在 ...
- SCU 4442 party 二分图最大点权独立集
每个青蛙喝黑茶或者红茶或者都可以喝 M个矛盾关系 有矛盾的不能喝同种茶 但你可以花费Wi使得这个青蛙消除所有矛盾 把矛盾当作边 青蛙当作点 如果这两个青蛙只喝不同的一种茶就不建边 题目中保证了不存在奇 ...
- Ubuntu 18.04实现实时显示网速
1.添加源 sudo add-apt-repository ppa:fossfreedom/indicator-sysmonitor 2.更新源 sudo apt-get update 3.安装sys ...
- Java 扫描微信公众号二维码，关注并自动登录网站
https://blog.csdn.net/qq_42851002/article/details/81327770 场景:用户扫描微信公众号的二维码,关注后自动登录网站,若已关注则直接登录. 逻辑: ...
- redis主从+哨兵 安装配置一
一.目的 实现redis的高可用. 二.同步过程 注意:当Master在后台把数据保存到快照文件完成之后,Master会把这个快照文件传送给Slave,而Slave则把内存清空后,加载该文件到内存中: ...