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. ShellExecute指定IE浏览器打开

    ShellExecute(NULL,L"open", L"iexplore.exe", L"www.baidu.com", NULL, SW ...

  2. Solr从数据库导入数据（DIH）

    一. 数据导入(DataImportHandler-DIH) DIH 是solr 提供的一种针对数据库.xml/HTTP.富文本对象导入到solr 索引库的工具包.这里只针对数据库做介绍. A.准备以 ...

  3. HTML表单（来自MDN的总结）

    表单介绍 HTML表单是用户和web站点或应用程序之间交互的主要内容之一.它们允许用户将数据发送到web站点.大多数情况下,数据被发送到web服务器,但是web页面也可以拦截它自己并使用它. HTML ...

  4. Test 6.29 T3 小学生

    问题描述 "不错,不错!那么,准备好迎接下一道题了么?"一道白光闪过,CJK 眼前出现了 1e100 个小学生."他们中,有一些人轨了我的机子.现在,我需要你在 1S 之 ...

  5. laravel后台账户登录验证（5.5.48版本）

    首先我是菜鸟,对laravel框架也不是很熟悉,突然有一天心血来潮就想研究一下laravel的后台登录用户登录的流程, 虽然公司项目中有这样的一套流程,也看了好几遍,越看越简单,越看我就越会了,当自己 ...

  6. linux运维、架构之路-SaltStack快速入门

    一.SaltStack介绍        SaltStack是一个服务器基础架构集中化管理平台,SaltStack基于Python语言实现,也是基于C/S架构,结合轻量级消息队列(ZeroMQ)与Py ...

  7. 重新定义数据库的时刻，阿里云数据库专家带你了解POLARDB

    摘要:POLARDB是阿里云ApsaraDB数据库团队研发的基于云计算架构的下一代关系型数据库,其最大的特色是计算节点与存储节点分离,借助优秀的RDMA网络以及最新的块存储技术.POLARDB不但满足 ...

  8. C# 获取路径中，文件名、目录、扩展名等

    string path = "C:\\dir1\\dir2\\foo.txt"; string str = "GetFullPath:" + Path.GetF ...

  9. js初步简单的编程代码

    简单图片切换编码demo图片地址自行替换 简单图片切换编码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  10. BaseFragment 基类代码

    public abstract class BaseFragment extends Fragment implements IBaseView { private List<BasePrese ...