注意:如果属性和方法还没定义直接使用的话,就会报   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的使用注意事项的更多相关文章

  1. 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. 第二章 Vue快速入门-- 27 字符串的padStart方法使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 第二章 Vue快速入门--14 使用v-model实现计算器的案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. 第二章 Vue快速入门--12 事件修饰符的介绍

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Python爬虫学习==>第一章:Python3+Pip环境配置

    前置操作 软件名:anaconda  版本:Anaconda3-5.0.1-Windows-x86_64清华镜像  下载链接:https://mirrors.tuna.tsinghua.edu.cn/ ...

  2. Django与Session

    Session Session的由来 ​ Cookie虽然在一定程度上解决了"保持状态"的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能 ...

  3. HCL试验六

    交换机R1: syssysname R1interface loopback 0ip add 192.168.10.1 24quinterface g0/0ip address 10.1.1.1 30 ...

  4. C# WPF Border控件总结

    Border控件不是一个布局面板,而是一个非常便于使用的元素,经常与布局面板一起使用.所以,在继续介绍其他布局面板之前,现在先介绍一下Border控件是有意义的. Border类非常简单.它只能包含一 ...

  5. Cisco路由器的dhcp服务的配置的命令

    Router(config)#IP DHCP POOL Jason Router(dhcp-config)#net 172.16.10.0 255.255.255.0 Router(dhcp-conf ...

  6. postman关联及读取文件进行参数化

    场景:登录后获取响应数据中的key.token..以便在接下来的接口调用.... 一.发送请求.查看响应 二.在Tests里使用响应的js代码来使其成为全局变量......... >>&g ...

  7. java—字符串比较忽略大小写

    String A = "aaa";String B = "AAA"; A.equalsIgnoreCase(B)

  8. PTA(Basic Level)1022.D进制的A+B

    输入两个非负 10 进制整数 A 和 B (≤230−1),输出 A+B 的 D (1<D≤10)进制数. 输入格式: 输入在一行中依次给出 3 个整数 A.B 和 D. 输出格式: 输出 A+ ...

  9. IIS 404设置

    想给自己做的的网站自定义一个404页面,开始 双击红框提示的错误页图标 双击上图红框提示的所示404行 修改上图红框提示的内容如下:我是直接在根目录放了一个自己做的404.html,实际情况要填写你自 ...

  10. 【Python】【demo实验1】【Python运行时强制刷新缓冲区,输出信息】(Python3 应不存在类似情况)

    [原文] 需求:打印一颗 ”*” 休息1s 代码如下: #!/usr/bin/python #coding=utf-8 ''' 暂停1s输出 ''' import time def printStar ...