zoukankan      html  css  js  c++  java
  • vue的就地复用--- v-for与:key

    v-for遵循的是vue的就地复用原则。文本与数据是绑定的,所以当文本被重新渲染的时候,列表也会被重新渲染。

    就地复用只适用于不依赖子组件状态或临时DOM状态的列表渲染输出。【比如表单输入值的列表渲染输出】。这种就地复用原则在一般的列表展示的场景中不会有问题。但是:如果列表元素存在于用户交互的场景【比如form表单或者重新排序等】中,就可能会报错,最好在v-for的同时设置key参数。

    因为vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。而key指向的是列表中每个元素的唯一值,key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。使用 :key,vue会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

     

     <!-- 使用v-for更新已渲染过的元素列表 为防止v-for报错, 一定要v-bind绑定key key是唯一的,指向列表中每个元素的唯一值 --> 
    <div class="info url log" v-for="(item,index) in moreListData" :key="index">
    

     

    对于v-for和:key的使用原理,还是不太理解,如果有大佬路过看到,欢迎赐教,待补充

    每天进步一点点
  • 相关阅读:
    iptables的例子1
    Nginx教程
    bash编程基础
    centos7 PXE自动安装环境搭建
    矛盾破裂了
    20200823-矩阵的收尾与离散控制的跌跌撞撞
    20200817-三大公式的结束-频域法的再探
    markdown换行
    由二〇二〇新冠疫情引发的对于开源、分享这一理念的看法
    Windows简单使用记录
  • 原文地址:https://www.cnblogs.com/677a/p/11726040.html
Copyright © 2011-2022 走看看