列表渲染语法  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. 《分布式消息中间件实践》P153

    问题:我直接把作者的源码拷贝下来(包括xml,resource等,作者应该使用的是Eclipse,我复制到IDEA上),依赖加上.执行P153的步骤,报错如下: Exception in thread ...

  2. Golang的进制转换实战案例

    Golang的进制转换实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常用进制概述 1>.进制概述 进制也就是进位制,是人们规定的一种进位方法.举个例子:二进制就 ...

  3. 官网英文版学习——RabbitMQ学习笔记(六)Routing

    有选择的接收消息. 上一节我们使用的是fanout exchange来实现消息的发布/订阅模式,这并没有给我们带来多大的灵活性——它只能够让人盲目地进行广播.而本节我们采用direct类型的交换器来实 ...

  4. nodejs常用模块

    推荐的入门教程: <七天学会NodeJS>  https://github.com/nqdeng/7-days-nodejs <Node.js 包教不包会> https://g ...

  5. 【LeetCode】反转字符串

    [问题] 编写一个函数,其作用是将输入的字符串反转过来. 示例 : 输入: "hello" 输出: "olleh" 示例 : 输入: "A man, ...

  6. 从0到1完成微信小程序开发(2)

    一,小程序的文件结构 小程序包含一个描述程序的app和多个描述各自页面的page 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 一个小程序页面由四个文件组成,分别是: 下面是一个单页 ...

  7. 033-PHP对一个数组先奇后偶,然后再进行从大到小排序

    <?php function Compare($str1, $str2) { if (($str1 % 2 == 0) && ($str2 %2 == 0)) { if ($st ...

  8. 干货分享:想要写好Proposal,这四个问题必须解决

    当大家确定了毕业论文选题之后,下一步就是着手写开题报告,也就是proposal.开题报告或者说是研究计划要回答四个问题:为什么这个问题重要,为什么这个问题很难解决,为什么现在要考虑解决这个问题,为什么 ...

  9. centos 7 打开端口

    查看防火墙状态 systemctl status firewalld 或者 firewall-cmd --state 临时关闭防火墙测试是否是端口问题 systemctl stop firewalld ...

  10. 51nod 1435:位数阶乘

    1435 位数阶乘 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 X是一个n位数的正整数 (x=a0a1...a ...