首页 > 其他分享 >列表循环-强调v-for循环中key值的注意点

列表循环-强调v-for循环中key值的注意点

时间:2023-06-06 23:33:19浏览次数:38  
标签:唯一性 name 列表 循环 key nextId id

key的注意事项

  1. key的值只能是字符串数字类型
  2. key的值必须具有唯一性(即:key的值不能重复)
  3. 建议把数据项id属性的值作为key的值(因为id属性的值具有唯一性)
  4. 使用index的值当作key的值没有任何意义(因为index的值不具有唯一性)
  5. 建议使用v-for指令时一定要指定key的值(即提升性能、又防止列表状态紊乱)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
  <div id="app">

    <!-- 添加用户的区域 -->
    <div>
      <input type="text" v-model="name">
      <button @click="addNewUser">添加</button>
    </div>

    <!-- 用户列表区域 -->
    <ul>
      <li v-for="(user, index) in userlist" :key="user.id">
        <input type="checkbox" />
        姓名:{{user.name}}
      </li>
    </ul>
  </div>

  <script src="lib/vue-2.6.12.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 用户列表
        userlist: [
          { id: 1, name: 'zs' },
          { id: 2, name: 'ls' }
        ],
        // 输入的用户名
        name: '',
        // 下一个可用的 id 值
        nextId: 3
      },
      methods: {
        // 点击了添加按钮
        addNewUser() {
          this.userlist.unshift({ id: this.nextId, name: this.name })
          this.name = ''
          this.nextId++
        }
      },
    })
  </script>
</body>

</html>

标签:唯一性,name,列表,循环,key,nextId,id
From: https://www.cnblogs.com/yang-young-young/p/17462060.html

相关文章

  • 逍遥自在学C语言 | break-循环的中断与跳转
    前言在C语言中,break语句是一种控制流语句,它用于终止当前所在的循环结构(for、while、do-while)或者switch语句,从而跳出循环或者结束switch语句的执行。一、人物简介第一位闪亮登场,有请今后会一直教我们C语言的老师——自在。第二位上场的是和我们一起学习的小白程序猿—......
  • 列表渲染-了解v-for的基本用法
    列表渲染指令vue提供了v-for列表渲染指令,用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for指令需要使用iteminitems形式的特殊语法,其中:items是待循环的数组item是被循环的每一项v-for指令还支持一个可选的第二个参数,即当前项的索引。语法格式为(item,index)inite......
  • 不能在foreach 循环中添加或删除元素
    迭代器在遍历map的时候,会先拿到modCount存起来然后遍历,在遍历的时候会判断当前modCount的值与我第一次进来存的值是否一样,不一样就报错如果在循环中添加或删除元素,是直接调用集合的add,remove方法【导致了modCount增加或减少】,但这些方法不会修改迭代实例中的expectedModCount,导......
  • 流程控制之for循环
    目录一、语法二、for+break三、for+continue四、for循环嵌套五、for+else六、for循环实现loading一、语法for循环可以用于对序列(如字符串、列表或元组)进行迭代操作,其基本语法如下:复制代码for变量in序列:循环体代码其中变量是在每次迭代时,序列中的下一个值,并且该......
  • render_to_string() got an unexpected keyword argument 'context_instance'的解决方
    参考资料:render_to_string()gotanunexpectedkeywordargument‘status’TypeErrorat/post/render_to_response()gotanunexpectedkeywordargument‘context_instance’Djangoerror:render_to_response()gotanunexpectedkeywordargument‘context_instance’......
  • yum源导入KEY值----warning: rpmts_HdrFromFdno: Header V3 RSA/SHA1 Signature, key
    Totalsize:42MDownloadingPackages:warning:rpmts_HdrFromFdno:HeaderV3RSA/SHA1Signature,keyIDc105b9de:NOKEYRetrievingkeyfromfile:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-5GPGkeyretrievalfailed:[Errno14]Couldnotopen/readfile:///......
  • 【python】循环语句
    循环语句在python中,for...[if]...语句一种简洁的构建List的方法,从for给定的List中选择出满足if条件的元素组成新的List,其中if是可以省略的。例如,我想去除列表中所有的偶数项,保留奇数项,可以这么写:ak=[0,1,2,3,4,5,6,7]new_t=[xforxinak]print(new_t)new_t2=[xfo......
  • API接口对电商平台的实质性帮助有哪些?以及api接口调用的的方式|根据关键词取商品列表
    API接口提供了电商平台之间数据和功能的交互方式,可以为电商平台带来以下几方面的实质性帮助:1. 增加平台数据实时性和准确性:通过API接口实现两个电商平台数据的实时同步,保证了平台商品信息、订单信息等数据的实时性和准确性。2. 提升平台的扩展性和可拓展性:通过API接口,第三方开......
  • 若依框架循环的form表单中配置权限
    页面中循环form表单 菜单中配置权限在字典管理的备注中,写权限 formb表单中,配置权限,直接从备注中获取权限标识 ......
  • 第7章. 用户输入和 while 循环
    7.1函数input()的工作原理7.1.1编写清晰的程序7.1.2使用int()来获取数值输入7.1.3求模运算符7.2while循环简介7.2.1使用while循环7.2.2让用户选择何时退出7.2.3使用标志7.2.4使用break退出循环7.2.5在循环中使用continue7.2.6避免无限循环7.3使......