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. 基于Redis实现简单的分布式锁【理论】

    摘要 分布式锁在很多应用场景下是非常有效的手段,比如当运行在多个机器上的不同进程需要访问同一个竞争资源的时候,那么就会涉及到进程对资源的加锁和释放,这样才能保证数据的安全访问.分布式锁实现的方案有很多 ...

  2. Java 静态方法、私有方法、常量的使用

    1.静态方法 2.私有方法 3.常量 4.接口小结

  3. php函数漏洞

    1.ereg — 正则表达式匹配 此函数遇 %00 截断. <?php $a = $_GET['pwd']; var_dump(ereg ("^[0-9]+$", $a)); ...

  4. Java缓冲流写出数据实例

    public class BufferedWriterDemo throws IOException { public static void main(String[] args) throws I ...

  5. NIO编程模式示例

    1. 服务端 import java.net.InetSocketAddress; import java.nio.ByteBuffer; import java.nio.channels.*; im ...

  6. linux运维、架构之路-linux文件权限

    一. R W X对应的数字及计算的方法 1.linux普通文件权限总结 ①r可读:表示具有读取.浏览文件内容(block)的权限 ②w可写:表示具有新增.修改文件内容的权限删除文件(修改文件名.)或创 ...

  7. vscode中执行gulp task的简便方法

    本文重点是gulp在vscode中执行task任务的方法 如何像webstorm那样简便操作gulp 的task 第1步:安装node.下载地址:https://nodejs.org/zh-cn/ 检 ...

  8. MySQL修改密码方法汇总

    本文给大家汇总介绍了MySQL修改密码的方法,分为MySQL5.7版本之前以及MySQL5.7版本之后的修改方法,有需要的小伙伴可以参考下 MySQL5.7版本之前修改密码的方法: 方法1: 用SET ...

  9. pl/sql中return和exit区别

    经测试: 1.exit只能用于循环中,并且退出循环往下执行: 2.return可用于循环或非循环,并且退出整个程序模块不往下执行. declare i number :=1; j number :=1 ...

  10. <!DOCTYPE>是什么

    所有浏览器都支持<!DOCTYPE> 概念 是指web浏览器关于页面使用哪个html版本进行编写的指令. 常用DOCTYPE声明 html 5 <!DOCTYPE html> ...