2.2.0+ 的版本里，**当在组件中使用** v-for 时，key 现在是必须的。

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

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

注意：

 　　在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  i
　　v-for=" (val,key i)" ,如果只写一个参数表示值，两个是值和键 三个，值、键、索引
 

v-for 循环普通数组

<body>

    <!-- v-for 循环普通的数组 和使用foreach 挺像 -->

        <div class="box">

            <p v-for="(item,i) in list">索引值：{{i}}----------值：{{item}}</p>

        </div>

    <script src="./lib/vue-2.4.0.js"></script>

    <script>

    var vm=new Vue({

        el:'.box',

        data:{

            list:[

                1,2,3,4,5,6

            ]

        }

    });

    </script>

</body>

v-for循环对象数组

<body>

    <div class="box">

        <p v-cloak v-for="(user,i) in list">id：{{user.id}}---------名称：{{user.name}}</p>

    </div>

    <script src="lib/vue-2.4.0.js"></script>

    <script>

        var vm=new Vue({

            el:'.box',

            data:{

                list:[

                    {id:1,name:'杜伟'},

                    {id:2,name:'王玥'},

                    {id:3,name:'任凯'},

                    {id:4,name:'刘海波'}

                ]

            },

            methods:{

            }

        });

    </script>

</body>

v-for 循环对象

　　

<body>

    <div class="box">

        <!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  

        -->

        <p v-for="(item,i) in pipor">{{item}}----{{val}}-----{{i}}</p>

    </div>

    <script src="lib/vue-2.4.0.js"></script>

    <script>

        var vm=new Vue({

            el:'.box',

            data:{

                pipor:{

                    id:1,

                    name:'杜伟',

                    gender:'男'

                }

            }

        });

    </script>

v-for 迭代数字

　　

<body>

    <div class="box">

        <p v-for="item in 10" v-text="item"> </p>

    </div>

    <script src="lib/vue-2.4.0.js"></script>

    <script>

        var vm=new Vue({

            el:'.box',

            data:{

            }

        });

    </script>

</body>

Key

　　*跟踪每个节点的身份，从而重用和重新排序现有的元素

　　*理想的key值是每项都有的且唯一的id。data.id

数组更新检测

　　使用以下方法操作数组，可以检测变动

　　push() pop()　　shift()　　unshift()　　splice() 　　sort() revrse()

Vue指令之`v-for`和`key`属性的更多相关文章

  1. Vue学习笔记【9】——Vue指令之v-for和key属性

    迭代数组(普通数组.对象数组) <ul> <li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name ...

  2. Vue的Key属性，v-for和v-if，v-if/v-show，v-pre不渲染，v-once只渲染一次

    key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...

  3. Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  4. VUE router-view key 属性解释

    router-view 作用, 你可以 router-view 当做是一个容器,它渲染的组件是你使用 vue-router 指定的. <template> <section clas ...

  5. vue v-for循环中key属性的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue 指令篇 案例(输入提交显示 提交数据_列表)

    一.文本操作指令 //1.v-text <p v-text="msg"></p> 等价于 <p>{{msg}}</p> //2.v- ...

  7. vue指令详解

    一.vue简绍 1. Vue.js是什么    Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...

  8. Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  9. [Vue] : Vue指令

    Vue指令之 v-cloak v-cloak是解决解决插值表达式的闪烁问题 . 给插值表达式的元素加上v-cloak <p v-cloak>{{ msg }}</p> 为v-c ...

随机推荐

  1. wpf日期控件

    /// <summary> /// Value converter to convert a datetime object to the specified string format. ...

  2. 【PHP】 php遍历文件夹文件，获取md5的值

    方法: <?php //定义操作目录 $dir = 'D:\phpstudy\WWW\test'; function getDir2($dir) { foreach (glob($dir . ' ...

  3. haproxy高可用、负载均衡集群

    HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.根据官方数据,其最高极限支持10G的并发.另外其支持从4层至7层的网络交换, ...

  4. 报错：org.apache.sqoop.common.SqoopException Message: CLIENT_0001:Server has returned exception NoClassDefFoundError: org/codehaus/jackson/map/JsonMappingException

    报错背景: CDH集成sqoop2服务之后,创建好link和job之后,执行job的时候报错. 报错现象: sqoop:> start job -j Exception has occurred ...

  5. Ubuntu18.04 instsall XMind_8 and crack

    1.dowload XMind_8 linux install zip wget https://www.xmind.cn/xmind/downloads/xmind-8-update8-linux. ...

  6. c# 在静态方法里，怎么能得到调用者的类名？

    System.Diagnostics.StackTrace st = new System.Diagnostics.StackTrace(); string name = st.GetFrame(1) ...

  7. 【超分辨率】—图像超分辨率(Super-Resolution)技术研究

    一.相关概念 1.分辨率 图像分辨率指图像中存储的信息量,是每英寸图像内有多少个像素点,分辨率的单位为PPI(Pixels Per Inch),通常叫做像素每英寸.一般情况下,图像分辨率越高,图像中包 ...

  8. git 操作说明

    第一步:代码提交到本地仓库 第二步:更新远程服务器代码到本地,如果有冲突需要优先解决,解决冲突后执行第一步操作 第三步:推送本地代码到远程服务器,可以使用source Tree 或者工具自带的配置gi ...

  9. Ubuntu18使用netplan设置多网口绑定

    Ubuntu18使用netplan设置网络参考:https://www.cnblogs.com/minseo/p/11325384.html 修改配置文件 /etc/netplan/50-cloud- ...

  10. iOS 多线程的简单理解（1） 方式 ：同步 异步

    最近遇到特别糟糕的面试,过程中提到多次对多线程的处理问题,并没有很好的给予答复和解决,所以在这里做个简单的备案: 期望能更加了解和熟练使用 多线程技术: 下面都是自己的总结,如果存在不对的,或者不足, ...