列表渲染语法  v-forv-for

循环对象

<article v-for="(item, key, index) of info">{{item}}
{{key}}
{{index}}
</article>

修改: info.name = ""

增加  需要从新引用

当不需要循环变更数据的时候可以用index作为key值

一般不建议用index作为key值。频繁操作dom元素的时候,还是非常耗费性能的,vue没办法充分复用dom节点

循环项目上加key值  提高性能

性能最优 key值要唯一 且不用index

循环中。不能使用array[下标] = “数据” 要使用vue提供操作数组的编译方法操作。才能实现响应式效果 数据变化  页面变化

push pop shift(删除第一项) unshift(数组第一项加东西) splice(数组截取) sort(数组排序) reverse(数组取反)

第二种方法 :改变数组引用  list = [新数组]

VUE,index key v-for的更多相关文章

  1. vue $index,$key已经移除了

    之前可以这样: <ul id="example"> <li v-for="item in items"> {{$index}} {{$k ...

  2. vue 中$index $key 已经移除了

    https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除 之前可以这样: 1 2 3 4 5 6 <ul id="ex ...

  3. 关于Vue中:key="index"的console警告

    在写vue项目时,浏览器的console出现如下警告信息: [Vue warn]: Property or method "index" is not defined on the ...

  4. (转)Vue种key的作用

    https://blog.csdn.net/qq_41861679/article/details/80659278 https://cn.vuejs.org/v2/api/#key 其实不只是vue ...

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

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

  6. vue中key的作用

    1.v-if中用key管理可复用的元素  Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做,除了使 Vue 变得非常快之外,还有一些有用的好处.例如,如果你允许用户在不同的 ...

  7. vue中key的作用 v-for里警告 v-if的复用

    vue总是会复用页面上已经存在的dom,区别的方法是加上key就可以,还设有v-for时候的警告也是如此key的作用是区别这条跟那条的.<body> <div id="ap ...

  8. Vue: 用 key 管理可复用的元素

    <div id="login"> <template v-if="loginType === 'username'"> <labe ...

  9. vue 之 key

    key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes.如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法.使用k ...

随机推荐

  1. POJ 2829 Buy Tickets

    Buy Tickets Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 26443   Accepted: 12639 Des ...

  2. 一百零九、SAP的OO-ALV之三,屏幕绘制器的使用

    一.在Screen页面,点击格式,会打开屏幕绘制器 二.点击定制控制,和PS一样画出一个显示区域的画布容器 三.双击之后,在弹出的属性页面写入一个名字,保存 四.激活屏幕后关闭 五.关闭屏幕绘制器之后 ...

  3. 127-PHP类通过魔术变量判断类中是否存在指定的方法

    <?php class ren{ //定义人类 //定义成员属性 private $name='Tom'; private $age=15; //定义成员方法 public function g ...

  4. Swift Json解析与model互转

    Json的解码与编码操作,这里使用swift自带的类JSONDecoder 和 JSONEncoder 1.基础处理 如果你的 JSON 数据结构和你使用的 Model 对象结构一致的话,那么解析过程 ...

  5. js利用递归生成随机数填充到数组

    用递归算法实现,数组长度为5且元素的随机数在2-32间不重复的值 var  array = new Array(5); function addNumToArray(array,num){     i ...

  6. CSU 1126 DFS前缀和

    在一棵树上找影响最小的某个点,某个点的影响是等于其他点到他的距离*其他点的权值 的和 我一开始也找不到什么好的方法,只能想到每个点暴力去判断,但是这样肯定会超时(10^5个点),又有点想用类似前缀和, ...

  7. vs code 切换语言(切换回英文)

    安装中文 安装教程:https://www.cnblogs.com/chenxi188/protected/p/11757456.html 切换回英文 调出搜索:ctrl+shift+p 输入:lan ...

  8. TRUNC()函数——oracle

    使用trunc()函数获取不同的日期: select trunc(sysdate) from dual; --今天的日期 select trunc(sysdate,'dd') from dual; - ...

  9. 08 SSM整合案例(企业权限管理系统):08.权限控制

    04.AdminLTE的基本介绍 05.SSM整合案例的基本介绍 06.产品操作 07.订单操作 08.权限控制 09.用户操作 10.权限关联与控制 11.AOP日志 08.权限控制 SSM权限操作 ...

  10. oracle(4)----空值说明

    1. 含义:空值(null)表示未知或者暂时不存在的数据,任何类型(没有约束的条件下)都可以取值null:2. 插入null值: insert into stu (id,name) values(3, ...