第二章 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 ...
随机推荐
- 03 vue项目结构
上一篇已介绍根据vue-cli创建项目,本篇介绍根据vue-cli官方脚手架创建的项目的项目结构. 一.图看结构 build [webpack配置] webpack相关配置,都已经配 ...
- 2-0 虚拟机与Linux系统安装
虚拟机与Linux系统安装 虚拟机硬件选择 由于是初学Linux,所以我们通过在虚拟机里安装的方式学习Linux,如果不知道找虚拟机和Linux的话请看我上一篇博客:计算机基础 如果你已经准备好了虚拟 ...
- Android测试之查看package和activity名称的方法
方法一:使用aapt //aapt是sdk自带的一个工具,在sdk\builds-tools\目录下 1.命令行中切换到aapt.exe目录执行:aapt dump badging + 路径 ...
- python-Web-数据库-Redis
概述: >>>安装: >>>数据类型: string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合) &g ...
- MathType 6.0中MT Extra(TrueType)问题
问题 MathType 6.0中MT Extra(TrueType)字体问题在打开MathType6.0时,有时会提示MathType需要安装一个较新版本的MT Extra(TrueType)字体,这 ...
- Kinect开发-开发环境搭建
0.安装Visual Studio.版本无所谓,但Kinect SDK for Windows只支持C/C#.接下来的开发语言将使用C#,用户界面框架使用WPF. 安装Kinect SDK for W ...
- 2019中山纪念中学夏令营-Day20[JZOJ] T1旅游详解
2019中山纪念中学夏令营-Day20[JZOJ] 提高组B组 Team_B组 T1 旅游 Time Limits: 2000 ms Memory Limits: 262144 KB Descrip ...
- SKCTF管理系统
一开始是一个简洁风的登录界面 康康注册界面 嗯...也是很简洁风呢. 那让我们来查看元素(fn+f12) 没有什么有flag的迹象呢! 那我们试一下注册一个账号 这时候我们已经有解题的线索了: 获得管 ...
- Ubuntu 系统安装 Docker
安装 Docker CE 有多种方法,下面是最简单的通过Docker仓库的安装方法,其他方法参见官方文档. 设置仓库 刷新软件包 sudo apt-get update 安装必要的软件包 sudo a ...
- TP5使用phpoffice phpexcel包操作excel（导出）
安装composer(window版本) 安装composer(MAC版本) 安装composer(Linux版本) 在PhpStorm配置 导出excel 1.使用composer安装phpoffi ...