精华内容
下载资源
问答
  • key作用:   key是为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为每项提供一个唯一的key属性。 先来举个例子: 一、没有加key: <!DOCTYPE html> <...

    key的作用:

      key是为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为每项提供一个唯一的key属性。

    先来举个例子:

    在这里插入图片描述

    一、没有加key:
    <!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     
    </head>
    <body>
        <div id="app" >
            <div>
                <input type="text" v-model="name" >
                <button @click="add">添加</button>
            </div>
            <ul>
                <li v-for="item in list">
                    <input type="checkbox">ID{{item.id}} -------name:{{item.name}}
                </li>
            </ul>
        </div>
    <script>
        var vm = new Vue({
                el:'#app',
                data:{
                    name: '',
                    list: [
                        { id:0,name:'小美子1号' },
                        { id:1,name:'小美子2号' },
                        { id:2,name:'小美子3号' }
                    ]
                },
                methods:{
                    add() {
                         //    1.拼接处一个完整的用户信息对象,包含ID 和name
                        const newUser= {id: this.list.length,name: this.name};
                        //    2.把拼接出来的用户信息对象 调用this.list.unshift方法把对象追加到数组的第一个
                        this.list.unshift(newUser);
                    }
                }
        })
    </script>
    </body>
    </html>
    
    没有加key的时候,当我选中第二个“小美子2号”后,再添加小美子4号时:

    在这里插入图片描述

    则会出现问题:

    选中的变成了“小美子3号”,位置依旧是第二个,很显然这不是我们想要的结果,解决这个问题的方法就是加key属性

    在这里插入图片描述

    二、加上key:
    <!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     
    </head>
    <body>
        <div id="app" >
            <div>
                <input type="text" v-model="name" >
                <button @click="add">添加</button>
            </div>
            <ul>
                <!-- 注意:key的取值必须是number 或 string,不能是对象 -->
                <!-- 而且 使用 v-for 循环的每一项的值,都要保证唯一性 -->
                <!-- 今后,只要使用 v-for循环,就必须为循环的每一项,添加 :key  属性绑定 -->
                <li v-for="item in list" :key="item.id">
                    <input type="checkbox">ID{{item.id}} -------name:{{item.name}}
                </li>
            </ul>
        </div>
    <script>
        var vm = new Vue({
                el:'#app',
                data:{
                    name: '',
                    list: [
                        { id:0,name:'小美子1号' },
                        { id:1,name:'小美子2号' },
                        { id:2,name:'小美子3号' }
                    ]
                },
                methods:{
                    add() {
                         //    1.拼接处一个完整的用户信息对象,包含ID 和name
                        const newUser= {id: this.list.length,name: this.name};
                        //    2.把拼接出来的用户信息对象 调用this.list.unshift方法把对象追加到数组的第一个
                        this.list.unshift(newUser);
                    }
                }
        })
    </script>  
    </body>
    </html>
    
    
    加上key以后,当我选中第二个“小美子2号”后,再添加小美子4号时:

    在这里插入图片描述

    上边出现的问题解决了,选中的依然是“小美子2号”:

    在这里插入图片描述

    注意:key的取值必须是number 或 string,不能是对象,而且使用 v-for 循环的每一项的值,都要保证唯一性 。

    展开全文
  • v-forkey属性的作用

    万次阅读 多人点赞 2019-06-19 15:39:01
    vue在进行列表渲染的时候,会默认遵守 就地复用策略 就地复用策略: 当在进行列表渲染的时候,vue...key属性可以用来提升v-for渲染的效率!,vue不会去改变原有的元素和数据,而是创建新的元素然后把新的数据渲...

    vue中在进行列表渲染的时候,会默认遵守 就地复用策略

    就地复用策略:

    当在进行列表渲染的时候,vue会直接对已有的标签进行复用,不会整个的将所有的标签全部重新删除和创建,只会重新渲染数据,然后再创建新的元素直到数据渲染完为止

     

    Vue中为v-for提供了一个属性,key:

    key属性可以用来提升v-for渲染的效率!,vue不会去改变原有的元素和数据,而是创建新的元素然后把新的数据渲染进去

     

    在使用v-for的时候,vue里面需要我们给元素添加一个key属性,这个key属性必须是唯一的标识

    给key赋值的内容不能是可变的

     

    1. 在写v-for的时候,都需要给元素加上一个key属性

    2. key的主要作用就是用来提高渲染性能的!

    3.key属性可以避免数据混乱的情况出现 (如果元素中包含了有临时数据的元素,如果不用key就会产生数据混乱)

     

    <!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>
      </head>
      <body>
        <div id="app">
          <ul>
            <li v-for="item in teachers" :key="item.id">{{ item.name }} <input type="text"></li>
          </ul>
        </div>
        <script src="./node_modules/vue/dist/vue.js"></script>
        <script>
          const vm = new Vue({
            el: "#app",
            data: {
                teachers: [
                  { id: 1, name: "aaa" },
                  { id: 2, name: "bbb" },
                  { id: 3, name: "ccc" },
                  { id: 4, name: "ddd" }
                ]
            }
          });
        </script>
      </body>
    </html>
    

     

    展开全文
  • vue中v-for中key值的作用

    千次阅读 2019-07-15 20:45:07
    vue中v-for中key值的作用 其实不只是vue,react在执行列表渲染时也会要求给每个组件添加上key这个属性。 要解释key作用,不得不先介绍一下虚拟DOM的Diff算法了。 我们知道,vue和react都实现了一套虚拟DOM,使...

    vue中v-for中key值的作用

    其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性。
    要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了。

    我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

    vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设:
    1. 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构。
    2. 同一层级的一组节点,他们可以通过唯一的id进行区分。

    基于以上这两点假设,使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)
    这里我们借用React’s diff algorithm中的一张图来简单说明一下:
    在这里插入图片描述
    当页面的数据发生变化时,Diff算法只会比较同一层级的节点:

    如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点以后的子节点了。
    如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新。

    当某一层有很多相同的节点时,也就是列表节点时,Diff算法的更新过程默认情况下也是遵循以上原则。

    比如一下这个情况:
    在这里插入图片描述
    我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的:
    在这里插入图片描述
    即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?

    所以我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点
    在这里插入图片描述
    所以一句话,key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,

    否则vue只会替换其内部属性而不会触发

    过渡效果。

    展开全文
  • vue中v-for中key作用

    千次阅读 2018-09-14 18:13:41
    需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。 参考:https://www.cnblogs.com/zhumingzhenhao/p/7688336.html...

    需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

    参考:https://www.cnblogs.com/zhumingzhenhao/p/7688336.html

    展开全文
  • 当 Vue.js 用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被...
  • uniapp 关于v-for中key的用处

    千次阅读 2020-06-19 21:17:49
    在uniapp文档中,说明过 ...已经说明了,key标识的只是对象的一个属性,防止在重新渲染只是出问题,并不能为排序的提供一些作用(当然除了一些特别麻烦的方法),对象属性的内容显示顺序并不会因为key而改变 ...
  • 关于Vue v-for中的:key作用

    万次阅读 多人点赞 2018-08-03 18:09:22
    之前项目有个功能,数据间有三层关系,通过3个 v-for实现,渲染页面元素的时候,出现错乱的情况,有点抓瞎。感觉和虚拟DOM有点关系,重新研究VUE 官方文档,同时参考网上内容,整理如下: 其实不只是vue、react在...
  • vue同时使用v-if和v-for出现key值重复的问题 具体的问题描述 <router-link :to="{name:'shopList',params:{orderType:orderType}}" v-for="(item,index) in brand" :key="index" v-if="ord...
  • Vue学习笔记(四)——v-forkey

    千次阅读 2019-03-18 23:34:16
    当使用v-for遍历数组时,如果没有指定key,则当数组元素顺序发生变更时,dom绑定的数据会更新,而dom本身的顺序不会变化;如果指定了key,则当数组元素顺序发生变更时,dom会和数据同步更新。下面用一个简单的例子来...
  • 快速、简洁讲明Vue中v-for循环key作用 概要 关于v-for中key问题,其实这已经是个很常见的问题了,基本网上一搜一大把,面试的时候也常常会被问到,讲这个问题可能会设计DOM与虚拟DOM,还有很重要的Diff算法。 ...
  • vue的v-for中key必须指定

    千次阅读 2019-04-23 10:44:29
    关于vue的这个v-for中必须要指定key的警告,有点牵强了,虽然对于渲染性能有着影响,但是这样非得强制你写一个,有点太强迫了,如果循环的元素有唯一值比如id这样的属性皆大欢喜,没有的话呢?
  • vuev-forkey

    千次阅读 2019-03-03 14:23:50
    vuekey 要解释key作用,不得不先介绍一下虚拟DOM的Diff算法了。 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff...
  • vue中v-for为何要加key?index为何不推荐作为key

    千次阅读 多人点赞 2020-08-07 00:49:52
    在使用vue组件的时候,我们经常会遇到v-for必须要加key值 来举个例子进行说明吧! 不存在key的情况 <!-- * @Author: angula * @Date: 2020-08-07 00:05:05 * @LastEditTime: 2020-08-07 00:17:21 * @FilePath...
  • v-for中v-bind:key绑定的参数区别

    千次阅读 2018-11-27 14:08:38
    li v-for="(item, key, index) in items" class="animate" v-bind:key="item.id"&gt;{{item.id}}&lt;/li&gt; 1.使用给数组对象绑定的id属性 // items data items: [ { id...
  • v-for key值: 使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素; 我们在使用的使用经常会使用index...
  • 当vue报错为:vue/require-v-for-key]Elements ...则在Vue 的版本里,当在组件使用v-for时,key是必须的。 解决方案:在文件 –>首选项 –>设置 –>在搜索框输入vetur.validation.template,可以找到v...
  • Vue之v-for循环中key属性注意事项

    万次阅读 2018-08-11 16:14:51
    当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每...
  • [vue/require-v-for-key] Elements in iteration expect to have 'v-bind:key' directives.eslint-plugin-vue 原因是:v-for在Eslint的规则检查下报错。 解决 报错说:Elements in iteration ex...
  • Vue v-for 绑定key和不绑定key的区别

    千次阅读 2019-09-28 18:28:15
    首先,它们区别主要在于 虚拟DOM的复用,绑定key可以更好的复用,下面来详细讲一下 假如我们有一个数组 arr = [1,2,3,4],我们要在2后面插入一个值9; 如果绑定了key值,那么会是这样的情况: 如果没有绑定key...
  • Vue: v-for的键值key

    万次阅读 多人点赞 2018-11-14 16:48:14
    v-for中key ...那么v-for中的键值key到底有什么作用呢。  首先看一看vue文档里的说法:  emmm,好像还是比较难懂,换种说法  在用v-for更新已渲染的元素列表的时候,会使用就地复用的策略;...
  • v-for报错 [vue/valid-v-for]Custom elements in iteration require ‘v-bind:key’ directives.eslint-plugin-vue 原因:这是因为我安装的enlint插件,它会对代码的规范进行检查。我这里用到v-for,但它是需要key...
  • &lt;li v-for="item in list"&gt; 这段代码在Visual Studio Code会被标红,解决办法如下 &lt;li v-for="item in list" :key="item"&gt;
  • 其实不只是vue,react在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key作用,不得不先介绍一下虚拟DOM的Diff算法了。我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,...
  • 为什么v-for中key值不推荐使用index

    千次阅读 2019-05-09 12:10:34
    首先我们举一个例子 我们现在有这个数组 [ { id:201401, name:'chen' }, { id:201402, name:'sun' ...如果我们使用index做key在我们渲染到页面的时候变成 ...li key:0 ,id:201401,name:chen li key:1 , id:201402...
  • &lt;div&gt; ...li v-for= "todo in todos"&gt; {{ todo.text }} &lt;/li&gt; &lt;/ol&gt; &lt;/div&gt; &lt;div&gt; todos: [ { te
  • vue核心面试题:v-for中为什么要用key

    千次阅读 2020-08-14 10:41:06
    一、v-for中为什么要用key 1.vue列表循环需加:key="唯一标识" 唯一标识尽量是item里面id等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key作用主要是为了高效的更新虚拟DOM。 ...
  • v-for中key 使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素; 我们在使用的使用经常会使用index(即...
  • Custom elements in iteration require ‘v-bind:key’ directives vue/valid-v-for 原因出在 template 里 模板语句是: <i-option v-for="item in classList" :value="item.value">{{ item.label }}</i-...
  • 在VUE项目使用了v-for 却没有绑定key 会导致报错 点击左下角的设置在搜索设置当中输入"vetur.validation.template" 将勾选去掉即可 但还是建议绑定key较为好 切记不能绑定index :key="item.label" (没法之前的...
  • vue的v-for循环渲染列表时,解决没有:key警告问题(:key作用) :key是为vue的响应式渲染提供方法,在列表中单条数据改变的情况下,可以进行单独渲染,减少页面资源消耗。  当前页面如果有列表渲染v-for,并且在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 572,129
精华内容 228,851
关键字:

v-for中key的作用