v-for中key的使用注意事项

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for中的key</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div class="app">
id:<input type="text" v-model="id">
name:<input type="text" v-model="name">
<input type="button" value="增加" @click="add">
<p v-for="(item,i) in arr" :key="item.id">
<!-- v-for循环key使用时只能使用number获取string(item.id),而且必须使用v-bind属性绑定的形式指定key的值-->
<input type="checkbox" name="" id=""> id:{{item.id}} name:{{item.name}}
</p>
<!-- v-for遍历数组中的对象 -->
</div>
<script>
var vm = new Vue({
el:'.app',
data:{
arr:[
{'id':1,'name':'齐怪1'},
{'id':2,'name':'齐怪2'},
{'id':3,'name':'齐怪3'},
],
id:'',
name:''
},
methods:{
add() {
this.arr.unshift({'id':this.id,'name':this.name})
}
}
})
</script>
</body>
</html>

vue.js(09)--v-for中的key的更多相关文章

  1. Vue.js 在 webpack 脚手架中使用 cssnext

    Vue.js 的 webpack脚手架默认已经使用了 PostCSS 的 autoprefixer 的功能. 如果想使用下一代 css语法,即cssnext: 1. 安装依赖 npm install ...

  2. vue.js在html页面中的使用

    1.加载vue.js,然后 var app = new Vue({ //vue代码})2.截图如下:

  3. 解决vue.js在编写过程中出现空格不规范报错的情况

    找到build文件夹下面的webpack.base.conf.js文件. 然后打开该文件,找到图下这段代码,把他注释掉. 注释掉之后,再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦.因为这 ...

  4. js获取json对象中的key和value,并组成新数组

    //比如有一个json var json = {"name" : "Tom", "age" : 18}; //想分别获取它的key 和 va ...

  5. Vue.js——60分钟快速入门 开发· webpack 中文文档

    转载于:http://www.cnblogs.com/keepfool/p/5619070.html http://www.css88.com/doc/webpack2/guides/get-star ...

  6. vue.js引用出错-script代码块放在head和body中的区别

    这篇随笔是为了记录vue.js引用出错的原因,看到最后原来是vue.js代码放在head中不能正常使用,要最后发现要将其放在body中才行... 原来是js代码放在head和body中的区别问题,占个 ...

  7. 前端之Vue.js库的使用

    vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...

  8. Vue.js先入个门看看

    使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...

  9. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

随机推荐

  1. HTTP post get request 时遇到特殊字符 ! @ # $ % ^ & * ( )

    HTTP post get request 时遇到特殊字符 ! @ # $ % ^ & * ( ) 使用对应的编码替代 例如: curl ftp://username:pass@word@ex ...

  2. spring requestbody json

    1  @requestbody string param 前台将jsonobject序列化成字符串 后台解析成JsonObject 2 @requestbody map<string,objec ...

  3. Angular Viewchild undefined

    Angular的viewchild在使用的时候报错 undefined 1 检查是否在元素上打上标识 #xxx 2 查看引用元素时的时机 是否在AfterViewInit之后 3 检查元素是否在*ng ...

  4. 动态新增删除tbody表格行与ajax请求完成后刷新父窗口问题

    获取tbody内的一行数据,包括hidden类型的数据$("#tbody_id").find("tr").each(function(){ var tdArr ...

  5. windows命令整理

    本文只是作为知识整理,尽可能的收集一些常用的内网指令.本人原伸手党一枚,希望这些内容对新人有用,大牛可自行忽略. 0x00 内网信息收集 一.单机基础信息收集 如果是获得第一台初始主机的权限的话,我们 ...

  6. 向Hive中导入数据的方式

    一.Hive客户端:根据数据源不同划分 1.从本地文件系统中导入数据到hive表中: load data local inpath "path" [OVERWRITE] into ...

  7. libopencv_imgcodecs3.so.3.3.1: undefined reference to `TIFFReadDirectory@LIBTIFF_4.0

    ubundu 编译 C++工程时遇到的: 解决方案: https://blog.csdn.net/qq_29572513/article/details/88742652

  8. Jenkines邮件中添加图片

    1.在Jenkins的邮件插件 Email-ext中的Default Content内容编写html文件,简单模板如下: <html>  <head>  </head&g ...

  9. unique && stl的全排列

    stl的全排列: 看代码. #include<iostream> #include<cstdio> #include<algorithm> #include< ...

  10. luogu P1047 校门外的树 x

    P1047 校门外的树 题目描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0 ...