第二章 Vue快速入门-- 18 v-for中key的使用注意事项
注意:如果属性和方法还没定义直接使用的话，就会报 xxx is not defined 导致界面不能正常显示。我看视频教程里老师的可以直接使用，而且界面正常显示，可能是vue版本不同吗？还不清楚
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></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的值 -->
<!--添加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.push({id:this.id,name:this.name})
this.list.unshift({id:this.id,name:this.name})
}
}
});
</script>
</body>
</html>
第二章 Vue快速入门-- 18 v-for中key的使用注意事项的更多相关文章
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...
- 第二章 Vue快速入门-- 27 字符串的padStart方法使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--14 使用v-model实现计算器的案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--12 事件修饰符的介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- springboot子模块 @Autowired无法找到其他模块的接口和类的解决方法
在main的启动类上添加 @SpringBootApplication(scanBasePackages = {"com.shangsheng"})或者@ComponentScan ...
- 怎么在 localhost 下访问多个 Laravel 项目，通过一个IP访问多个项目（不仅仅是改变端口哦）
server { listen 80; server_name blog.sweetsunnyflower.com; index index.html index.htm index.php; cha ...
- office web apps安装部署,配置https,负载均衡（七）配置过程中遇到的问题详细解答
该篇文章,是这个系列文章的最后一篇文章,该篇文章将详细解答owa在安装过程中常见的问题. 如果您没有搭建好office web apps,您可以查看前面的一系列文章,查看具体步骤: office we ...
- upload上传
1>使用apache第三方控件commons-fileupload实现上传(引入jar包),能够极大的简化实现上传文件的代码量 2>能够实现文件的上传功能,当我们的项目中需要上传图片,文档 ...
- Python全栈开发之3、深浅拷贝、变量和函数、递归、函数式编程、内置函数
一.深浅拷贝 1.数字和字符串 对于 数字 和 字符串 而言,赋值.浅拷贝和深拷贝无意义,因为其永远指向同一个内存地址. import copy # 定义变量 数字.字符串 # n1 = 123 n1 ...
- 西安邀请赛-L（打表找规律）
题目链接:https://nanti.jisuanke.com/t/39279 题意:给定n个不同的数表示的序列,定义两种操作:1. 交换前一半和后一半(如果有奇数个,则中间的不管).2. 交换每个偶 ...
- [转帖]通俗易懂的Docker 入门教程
看完此文,妈妈还会担心你docker入不了门? http://www.17coding.info/article/24 上周对象突然心血来潮说想养个小宠物,我问想养啥她又说随便,你看着办!!!这我 ...
- 初次shell编程
虽然说的是初次shell写xhell脚本,但是其实我也写了三.四个简单的脚本了.现在总结下写简单的shell脚本中遇到的一些小问题备忘一下吧. 首先是脚本文件是已.sh作为后缀的,可以先建一个.sh的 ...
- 设计模式:策略模式(Stratege)
首先我们需要知道策略模式与状态模式是如此的相似,就犹如一对双胞胎一样.只不过状态模式是通过改变对象内部的状态来帮助对象控制自己的行为,而策略模式则是围绕可以互换的算法来创建成功业务的.两者都可用于解决 ...
- powerdesiner概念模型转物理模型以及失败的解决方法
powerdesiner概念模型转物理模型 概念模型转物理模型 关于powerdesinger 出现Entity Attribute code uniqueness解决办法 Entity Attrib ...