黑马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. Redis单机安装部署

    1.下载: redis-4.0.8.tar.gz,存放至/data/tools下,解压: # wget http://download.redis.io/releases/redis-4.0.8.ta ...

  2. go语言入门（9）文本文件处理

    1,字符串处理 字符串在开发中经常用到,包括用户的输入,数据库读取的数据等,我们经常需要对字符串进行分割.连接.转换等操作,我们可以通过Go标准库中的strings和strconv两个包中的函数进行相 ...

  3. Spring中事务的传播行为，7种事务的传播行为，数据库事务的隔离级别

    Propagation.REQUIRED 代表当前方法支持当前的事务,且与调用者处于同一事务上下文中,回滚统一回滚(如果当前方法是被其他方法调用的时候,且调用者本身即有事务),如果没有事务,则自己新建 ...

  4. [react] - 循环请求 redux-saga

    //根据uuid 获取 apt报告信息 *getNotesByUid({ payload, callback }, { call, put }) { // payload 是个数组, 并发执行,参考r ...

  5. C++中volatile

    volatile只保证其“可见性”,不保证其“原子性”. 执行count++;这条语句由3条指令组成: (1)将 count 的值从内存加载到 cpu 的某个 寄存器r: (2)将 寄存器r 的值 + ...

  6. spring boot2X代码混淆

    为了防止代码很容易被反编译而造成泄露,所以打包时进行代码混淆 使用 proguard-maven-plugin插件 <build> <finalName>${artifactI ...

  7. 推荐几款好用的Chrome插件

    '工欲善其事,必先利其器'.优秀的开发者不仅体现在其在技术方面的精通,还体现在其对各种开发工具的充分了解与使用,这会让其开发效率事半功倍.作为一个前端开发者,平时主要是跟浏览器打交道,Chrome浏览 ...

  8. 18-SQLServer中给视图创建索引

    一.注意点 1.索引视图所引用的基表必须在同一个数据库中,不是用union all引用多个数据库的表: 2.创建索引视图时要加上with schemabinding: 3.创建索引视图时要指定表所属的 ...

  9. vue-重要方法使用

    标签属性router-link-exact-active: 当页面正在方位是触发router-link-exact-active 标签router-link to= 使用a标签页面就会跳转,就不是单页 ...

  10. run zabbix with docker

    #!/bin/bashdocker run --name some-zabbix-server-mysql -p 10051:10051 --net=host -e DB_SERVER_HOST=&q ...