列表渲染语法  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. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-th-list

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. Ubuntu19.04的安装过程详解以及操作系统初始化配置

    Ubuntu19.04的安装过程详解以及操作系统初始化配置                                                                       ...

  3. 【转载】Android Gradle Build Error:Some file crunching failed, see logs for details解决办法

    Android Gradle Build Error:Some file crunching failed, see logs for details解决办法 转载请标明出处: http://www. ...

  4. SpringBoot#自定义配置的封装

    _震惊,开局 不可避免的需要弄一些自定义的配置. 要点: 1. 把配置项都写出来,分析层次关系:2. 抽象成bean与bean之间的关系,写出bean对应的类,这时候配置项对应了bean的属性,属性可 ...

  5. http请求的过程及潜在的性能优化点

    web前端的看富于部署过程 开发者将开发的代码发布到远程的服务器(webserver/cdn),用户通过访问浏览器输入相应的网址,浏览器向远程服务器发送请求,动态的增量式的加载资源 web前端就是一个 ...

  6. Python实战案例:这是你见过的最详细的JS加密登录某博

    0x00 抓包分析 简单的搜索之后发现,很多参数都是登陆上面这个请求返回的值,这个请求在输入完账号光标到达密码框时就会生成! 0x01 加密逻辑分析 搜索su=可以很快找到加密的位置,上图看到e.su ...

  7. 四十五、SAP中Message的管理

    一.事务代码SE91 二.输入相关名字,点击创建 三.输入内容 四.定义成本地对象 五.在消息中添加一条短文本 六.我们代码如下 七.执行

  8. [题解] LuoguP4609 [FJOI2016]建筑师

    传送门 首先对于高度为\(n\)的建筑,他的左边有\(A-1\)个建筑能被看到,右边有\(B-1\)个建筑能被看到,这两者类似,所以先来看左边. 一个建筑将会遮挡住它后面的高度比它矮的建筑,直到一个高 ...

  9. 吴裕雄--天生自然C++语言学习笔记:C++ 基本的输入输出

    C++ 的 I/O 发生在流中,流是字节序列.如果字节流是从设备(如键盘.磁盘驱动器.网络连接等)流向内存,这叫做输入操作.如果字节流是从内存流向设备(如显示屏.打印机.磁盘驱动器.网络连接等),这叫 ...

  10. 日期月份是英文转成数字——oracle

    update table01 set F_DATE = to_char(to_date(F_DATE, 'dd-month-yy', 'NLS_DATE_LANGUAGE=AMERICAN'), 'y ...