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. Facebook超过1亿用户数据泄露，疑与中国黑客组织有关？

    Facebook又向用户投放了另一个重磅炸弹,承认其超过1亿用户中的所有用户都应该认定恶意的第三方垃圾信息以及强大的黑客组织泄露了他们的公开个人资料信息. 周三,Facebook首席执行官马克扎克伯格 ...

  2. win cmd执行Python脚本提示找不到模块问题

    Windows关于命令行执行Python脚本,提示找不到模块的问题,我 本人也是在pycharm上运行没毛病的,后来在本地搞了个Jenkins做定时任务,谁知道就提示找不到模块 也百度了很多,都是说什 ...

  3. animation transition transform

    animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 div{width:100px;height:100px;background:red;animation:move ...

  4. fiddler常见问题

    捕获https: tools>options https>decrypt https traffic :安装证书捕获客户端请求: tools>options connections& ...

  5. AI 一体机，满足新时代的新需求

    AI 变革带来哪些 IT 的新要求? 深度学习的突破和硬件的突飞猛进,使得人工智能“第n春”焕发蓬勃生机.这是历史上第一次,机器可以在如人脸识别等‘人类’工作上做得比我们人类更好. 人工神经网络有许多 ...

  6. 【HDOJ6667】Roundgod and Milk Tea（模拟）

    题意:有n个班级,每个班级有a[i]个人,b[i]杯奶茶 每个人至多喝一杯奶茶,且不能喝自己班的 问能喝到奶茶的最多总人数 n<=1e6,a[i],b[i]<=1e9 思路: 做法一: # ...

  7. Solidworks 2019 无法获得下列许可solidworks standard无效的(不一致的)使用许可号码(-8,544,0)

    若出现如下述错误,只需将C:\***(C盘中生成注册表的文件夹)\Program Files\SOLIDWORKS Corp\SOLIDWORKS下的netapi32.dll文件复制到所安装路径中SO ...

  8. Java内置多线程框架Executor

    JDK1.5之后,增加了一个Executor让我们能更好的使用多线程. 它位于java.util.concurrent包下 因为是JDK内置类库,我们不需要导入任何第三方jar包. 代码实例: imp ...

  9. [LeetCode] 421. Maximum XOR of Two Numbers in an Array（位操作）

    传送门 Description Given a non-empty array of numbers, a0, a1, a2, … , an-1, where 0 ≤ ai < 231. Fin ...

  10. JS中设置input的type="radio"默认选中

    html: <input id="Radio1" type="radio" value="男" name="st_Sex&q ...