黑马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. VUE实现微博发布效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. **表示python中的意思

    **表示python中的意思 **表示python中的电源操作传递参数和定义参数时(所谓的参数是调用函数时传入的参数,参数是定义函数时定义函数的参数),还可以使用两个特殊语法:“`*`**”. 调用函 ...

  3. 说说css hack，说真的，我也是才去了解这个东西

    之前在很多地方看到css hack,今天狠下心,看看到底是什么鬼,所有我去百度了,然后看了一篇文章,然后写个小总结. css hack就是通过加一些特定的符号,不同的浏览器可以识别特定符号的样式,以此 ...

  4. XGBOOST in WIN64 安装

    参考:https://blog.csdn.net/zyghs/article/details/50897716 环境 platform:windows 10,64位 Python: Python3.7 ...

  5. C#验证控件使用方法及常用正则表达式例析(转)

    ASP.NET为开发人员提供了一整套完整的服务器控件来验证用户输入的信息是否有效.这些控件如下: 1.RequiredFieldValidator:验证一个必填字段,如果这个字段没填,那么,将不能提交 ...

  6. Ubuntu系统---安装 WPS

     Ubuntu系统---安装 WPS Ubuntu桌面系统自带了Libreoffice办公软件,但是个人觉得它不符合我们中国人的使用习惯.搜索了Office For Linux,好麻烦,也会出现问题, ...

  7. 牛客练习赛51 C 勾股定理 （数学，结论）

    链接:https://ac.nowcoder.com/acm/contest/1083/C来源:牛客网 题目描述 给出直角三角形其中一条边的长度n,你的任务是构造剩下的两条边,使这三条边能构成一个直角 ...

  8. P1231 教辅的组成 拆点限流

    如果只有两个物品的话 是一个裸的二分图匹配问题 现在变成了三个物品之间的匹配 则只要在中间加一层节点表示书 再把这层的每个点拆成两个点中间连一条边限制流量 使其只能用一次 #include<io ...

  9. linux下devel软件包作用

    devel 包主要是供开发用,至少包括以下2个东西: 头文件 链接库 有的还含有开发文档或演示代码. 以 glib 和 glib-devel 为例: 如果你安装基于 glib 开发的程序,只需要安装 ...

  10. SpringMVC问题整理

    JSP页面无法获取ModelAndView里的值 自己搭的项目突然EL表达式取不到值了 不管是用 ${msg} 还是用JSTL的<c:out value="${msg}"/& ...