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. prufer 序列 学习笔记

    prufer 序列是一种无根树的序列,对于一个 \(n\) 个点的树,其 prufer 序列的长度为 \(n-2\). prufer 序列和原树之间都可以唯一地相互转化. 构造 构造 prufer 序 ...

  2. 2020年的ARM处理器将超越英特尔

    2020年ARM真的会超越英特尔成为世界芯片霸主吗?迄今为止,基于ARM的笔记本电脑一直很流行,但在一两年内你可能会对它们产生不同的印象.该公司对其未来的处理器架构的性能预期提供了一个罕见的看法,这些 ...

  3. Mysqldump导入数据库很慢的解决办法

    https://blog.csdn.net/xizaihui/article/details/53103049 1.MySQLdump导出的SQL语句在导入到其他数据库的时候会相当慢,甚至几十秒才处理 ...

  4. 【leetcode】307. Range Sum Query - Mutable

    题目如下: 解题思路:就三个字-线段树.这个题目是线段树用法最经典的场景. 代码如下: class NumArray(object): def __init__(self, nums): " ...

  5. prim 模板

    #include<cstdio> #include<vector> #include<cstring> #include<set> #define ma ...

  6. linux发版

    使用MobaXterm_v8.5 1.upload需要更换的文件 2.关闭Tomcat    cd /usr/local/tomcat/apache-tomcat-6.0.30-pcitcaly/  ...

  7. videojs实践--兼容ie7,8

    1,还是先上图 ie9+,ff,chrome,,,

  8. random——伪随机数生成模块

    random——伪随机数生成模块 转自:https://blog.csdn.net/zhtysw/article/details/79978197 该模块包含构造伪随机数生成器的多个方法.对于整数,伪 ...

  9. 初识HTTP状态码。

    HTTP状态码被分成了五类.100-199 用于指定客户端应相应的某些动作.200-299 用于表示请求成功.300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息.400-49 ...

  10. linux下rpm包安装、配置和卸载mysq

    l   WIN10下虚拟机:VMware workstation 12 PRO 安装 # 1.查看系统版本 [root@vm-xiluhua][/home/xiluhua]$ cat /etc/red ...