黑马vue---19、v-for中key的使用注意事项

一、总结

一句话总结：

必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值
<p v-for="item in list" :key="item.id">

list: [
    { id: 1, name: '李斯' },
    { id: 2, name: '嬴政' },
    { id: 3, name: '赵高' },
    { id: 4, name: '韩非' },
    { id: 5, name: '荀子' }
  ]

二、内容在总结中

<!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---19、v-for中key的使用注意事项的更多相关文章

  1. Vue学习之路第十四篇：v-for指令中key的使用注意事项

    1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...

  2. 第二章 Vue快速入门-- 18 v-for中key的使用注意事项

    注意:如果属性和方法还没定义直接使用的话,就会报   xxx is not defined 导致界面不能正常显示.我看视频教程里老师的可以直接使用,而且界面正常显示,可能是vue版本不同吗?还不清楚 ...

  3. Vue main.js 文件中全局组件注册部分

    在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...

  4. Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现（2022/7/13）

    文章目录 1.基本列表 1.1 基本知识 1.2 代码实例 1.3 测试效果 2.key的原理 2.1基本知识 2.2 代码实例 2.3 测试效果 2.4 原理图解 3.列表过滤 3.1 代码实例 3 ...

  5. vue中：key 和react 中key={} 的作用，以及ref的特性？

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

  6. Springboot 之 自定义配置文件及读取配置文件注意:配置文件中的字符串不要有下划线 .配置中 key不能带下划线,value可以(下划线的坑,坑了我两天..特此纪念)

    注意:配置文件中的字符串不要有下划线 .配置中  key不能带下划线,value可以 错误的.不能读取的例子: mySet .ABAP_AS_POOLED      =  ABAP_AS_WITH_P ...

  7. json字符串中key值下划线命名转换为驼峰命名

    json字符串中key值下划线命名转换为驼峰命名: 例如: 原json串: String json= "{'user_name':'ok','user_sex':0,'object_info ...

  8. Oracle基础学习（二）v$session中Command的数字含义

    v$session中Command的数字含义. 1 CREATE TABLE 2 INSERT 3 SELECT 4 CREATE CLUSTER 5 ALTER CLUSTER 6 UPDATE 7 ...

  9. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

随机推荐

  1. idea启动卡死，项目界面一直processing

    1 原因 因为上次退出项目,非正常退出,导致索引生成有问题. 2 解决办法 删除项目根目录下 .idea文件夹,然后重新打开,重新indexing生成索引文件

  2. IDEA 运行报错：WARN: Establishing SSL connection

    使用JDBC连接数据库时出现报错, 报错内容:Wed Sep 26 14:30:31 CST 2018 WARN: Establishing SSL connection without server ...

  3. class文件与dex文件解析

    关于Android的热修复与插件化技术在如今基本上已经成为了“时髦技术”的标配了,或者说用来进行“炫技”的一种方式,毕境如今Android已经发展得非常之成熟了,基本上APP用的到东东都差不多,除了业 ...

  4. 遍历二叉树 - 基于队列的BFS

    之前学过利用递归实现BFS二叉树搜索(http://www.cnblogs.com/webor2006/p/7262773.html),这次学习利用队列(Queue)来实现,关于什么时BFS这里不多说 ...

  5. bitcoind搭建

    https://degreesofzero.com/article/installing-bitcoind-on-ubuntu.html1. sudo apt-get install python-s ...

  6. 软件测试常用的linux命令

    不同Linux发行版的命令数量不一样,但Linux发行版本最少的命令也有200多个.这里我把比较重要和使用频率最多的命令,按照它们在系统中的作用分成下面六个部分一一介绍. ◆ 安装和登录命令:logi ...

  7. GET与POST方法和用curl命令执行

    1.超文本传输协议 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信,web 浏览器可能是客户端,而计算机上的网络应用程序也可能作为服务器端. HTTP的工作方式是客户机与服务器之间 ...

  8. CodeForces 839B - Game of the Rows | Codeforces Round #428 (Div. 2)

    血崩- - /* CodeForces 839B - Game of the Rows [ 贪心,分类讨论] | Codeforces Round #428 (Div. 2) 注意 2 7 2 2 2 ...

  9. 隐藏IDEA project 中的指定文件

    例如隐藏project下的.idea文件目录,以及.iml文件 在 Settings>File Types > ignore files and folders 中添加    .idea; ...

  10. 错误信息：[ERR] Sorry, can't connect to node 10.211.55.8:7001

    错误信息: [root@centos-linux redis-cluster]# ./redis-trib.rb create --replicas 1 10.211.55.8:7001 10.211 ...