第二章 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 ...
随机推荐
- UBT框架加解密工具项目 UBT.Framework.Encryption
DESEncrypt.cs //==================================================================================== ...
- DevOps - Scrum
1 - DevOps与敏捷开发 在采用敏捷开发的情况下,所有成员都对服务和产品负责,理解彼此的业务,符合DevOps的组织和文化. 以商业需求为核心,在较短期间内确定开发方针,并持续进行改善,从而逐步 ...
- AKKA文档2.2（java）——术语，概念
原文:http://doc.akka.io/docs/akka/2.3.6/general/terminology.html 译者:吴京润 本章我们试图建立一个通用的术语列表,用来定义有关并发和分布式 ...
- MSF魔鬼训练营-3.4.2网络漏洞扫描-OpenVAS（待补完）PS：在虚拟机里面运行OpenVAS扫描的进度真的是超慢啊...
由于新版的kali中没有预装OpenVAS.所以在虚拟机中安装花了非常多的时间. 安装过程参考:http://www.cnblogs.com/zlslch/p/6872559.html过程写的非常详 ...
- 2019牛客暑期多校训练营（第二场）-E MAZE
题目链接:https://ac.nowcoder.com/acm/contest/882/E 题意:n×m的矩阵,0表示可以走,1表示墙,不能通过.有q中操作,一种是改变坐标(x,y)的状态,一种是询 ...
- 小白学习django第五站-简易案例
首先在setting.py文件中编写数据库配置内容 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': ' ...
- sklearn-GDBT
GDBT 可以解决分类和回归问题 回归问题 def __init__(self, loss='ls', learning_rate=0.1, n_estimators=100, subsample=1 ...
- Zabbix 系统概述与部署
Zabbix是一个非常强大的监控系统,是企业级的软件,来监控IT基础设施的可用性和性能.它是一个能够快速搭建起来的开源的监控系统,Zabbix能监视各种网络参数,保证服务器系统的安全运营,并提供灵活的 ...
- win10子系统Ubuntu重置
重置: 在win10命令行下执行: lxrun /uninstall /full 安装: win+R打开bash 执行命令: lxrun /install /y
- Windows 2008 R2阿里云安全基线检查
设置密码使用期限策略在管理工具打开本地安全策略,打开路径:安全设置\帐户策略\密码策略,将密码最长使用期限设置为30-180之间,建议值为90,将密码最短使用期限设置为1-14之间,建议值为7. 风险 ...