第二章 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 ...
随机推荐
- Servlet(4)：Session
Session, Cookie及交互 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session. Cookie通过在客户端记录信息确 ...
- PYTHON TDD学习（一）-->Python 3.4版本环境安装Django及其启动
1.安装Python3.4版本,原因:3.4及其以后版本默认自带pip工具,非常好用 2.django 安装命令(c:\Python34\Scripts):pip install django 3.s ...
- PJzhang:今天才搞清身份证、银行卡……的编码规则
猫宁!!! 之前思考过常见证件的编码规则,抽空查了一下,发现挺有意思. 一般查询证件或者手机号归属地都是直接百度小工具,但是背后的查询机制如何,可能大多人不甚了解. 介绍几种生活中最 ...
- LinuxC/C++基础——引用
1.引用(Reference) 1.1引用的基本语法 引用是C++对C的重要扩充,也存在与其他一些编程语言中,并不是C++的发明.通过引用,C++增加了 另外一种给函数传递地址的途径,这就是按引用传递 ...
- Analysis Methods in Neural Language Processing: A Survey
本文对神经语言处理中的分析方法进行了综述,并根据研究的突出趋势对其进行了分类,指出了存在的局限性,指出了今后研究的方向.
- solr设置分片和副本
numShards:分片数 replicationFactor:每个分片下的副本数 maxShardsPerNode:当numShards为1,replicationFactor为3时,maxShar ...
- php 二维数据排序 排行榜
php 二维数据排序 排行榜 $rateCount = array(); foreach($groupUsers as $user){ $rateCount[] = $user['rate']; } ...
- （5.8）mysql高可用系列——MySQL中的GTID复制（实践篇）
一.基于GTID的异步复制(一主一从)无数据/少数据搭建 二.基于GTID的无损半同步复制(一主一从)(mysql5.7)基于大数据量的初始化 正文: [0]概念 [0.5]GTID 复制(mysql ...
- [转帖]docker清理日志
docker清理日志 2017年05月03日 10:37:27 不想当码农的程序员 阅读数 12827 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn. ...
- Spring使用注解实现AOP
一.AspectJ概述 AspectJ是一个面向切面的框架,它扩展了Java语言.定义了AOP语法,能够在编译期提供代码的织入,它提供了一个专门的编译期用来生成遵守字节编码规范的Class文件. @A ...