<!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>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <div>

      <label>Id:

        <input type="text" v-model="id">

      </label>

      <label>Name:

        <input type="text" v-model="name">

      </label>

      <input type="button" value="添加" @click="add">

    </div>

    <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->

    <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->

    <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，

                 如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->

    <p v-for="item in list" :key="item.id">

      <input type="checkbox">{{item.id}} --- {{item.name}}

    </p>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        id: '',

        name: '',

        list: [

          { id: 1, name: '李斯' },

          { id: 2, name: '嬴政' },

          { id: 3, name: '赵高' },

          { id: 4, name: '韩非' },

          { id: 5, name: '荀子' }

        ]

      },

      methods: {

        add() { // 添加方法

          this.list.unshift({ id: this.id, name: this.name })

        }

      }

    });

  </script>

</body>

</html>

vue v-for循环中key属性的使用的更多相关文章

  1. vue 如何在循环中 "监听" 的绑定v-model数据

    vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. ...

  2. Vue指令之`v-for`和`key`属性

    2.2.0+ 的版本里,**当在组件中使用** v-for 时,key 现在是必须的. 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “**就地复用**” 策略.如果数据项 ...

  3. Vue学习笔记【9】——Vue指令之v-for和key属性

    迭代数组(普通数组.对象数组) <ul> <li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name ...

  4. 理解vue中v-for循环中得key原理及一些错误

    作用:给节点做一个标识,相当于人类的身份证号,虚拟DOM中的标识 下列是key值的一些使用场景和带来的问题:   js:    const vm = new Vue({             el: ...

  5. react中map循环中key取值问题

    数组中没有唯一的key,可以定义变量,拼接字符串连接. let i = 0; key={`infoItem-col-${i++}`}

  6. VUE router-view key 属性解释

    router-view 作用, 你可以 router-view 当做是一个容器,它渲染的组件是你使用 vue-router 指定的. <template> <section clas ...

  7. Vue的Key属性，v-for和v-if，v-if/v-show，v-pre不渲染，v-once只渲染一次

    key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...

  8. vue（5）—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

  9. vue里v-for下的key的作用

    将v-for的元素赋予唯一的key属性,则会打破‘就地复用原则’: 这个就地复用原则是指 如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确 ...

随机推荐

  1. vue页面跳转传参

    跳转页 this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}}) 接收页 this.$route.params.参数名

  2. 来自 Spring Cloud 官方的消息，Spring Cloud Alibaba 即将毕业

    2019 年 7 月 24 日晚,Spring Cloud 官方发布公告: 仓库迁移是官方决定 Spring Cloud Alibaba 即将毕业 根据官方最新的发版规则,我们会把孵化器中的 Spri ...

  3. 读JS高性能总结——DOM编程（一）

    DOM是一个与语言无关的API,它在浏览器中的借口却是用JS来实现的. 浏览器通常会把DOM和JS独立实现. 在IE中,JS的实现名是JScript,位于jscript.dll文件中,DOM实现则是m ...

  4. LintCode_408 二进制求和

    给定两个二进制字符串,返回他们的和(用二进制表示). 思路 string s = ""; 目标字符串 cp 存储进位;取 0或1 sum = a[i] + b[i] + cp;分为 ...

  5. Linux的一些简单命令操作总结

    防火墙 查看防火墙状态 systemctl status iptables (或service iptables status) 关闭防火墙 systemctl stop iptables(或serv ...

  6. QPS 提升60%，揭秘阿里巴巴轻量级开源 Web 服务器 Tengine 负载均衡算法

    前言 在阿里七层流量入口接入层(Application Gateway)场景下, Nginx 官方的Smooth Weighted Round-Robin( SWRR )负载均衡算法已经无法再完美施展 ...

  7. ural1297 后缀数组+RMQ

    RMQ即求区间(i,j)的最值.通过O(nlogn)处理,O(1)给出答案. RMQ主要是动态规划来做.dp[i][j]表示从i开始的长为2^j的区间最值. 那么可以得到dp[i][j]=max(dp ...

  8. 笔记：html常见的兼容问题

    IE: IE的双边距bug: 块级元素float后设置横向的margin,IE6显示的margin比较大. 解决办法:display:inline 双边距bug:在IE6下,如果对元素设置浮动,同时又 ...

  9. Java练习 SDUT-2561_九九乘法表

    九九乘法表 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 九九乘法表是数学学习的基础,今天我们就来看看乘法表的相关问题 ...

  10. 王坚十年前的坚持，才有了今天世界顶级大数据计算平台MaxCompute

    如果说十年前,王坚创立阿里云让云计算在国内得到了普及,那么王坚带领团队自主研发的大数据计算平台MaxCompute则推动大数据技术向前跨越了一大步. 数据是企业的核心资产,但十年前阿里巴巴的算力已经无 ...