列表渲染语法  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. QEMU 配置网络

    背景 为了 实现 uboot 中连接上 QEMU-host 的网络. 非常奇怪,本人的 系统中 存在/dev/net/tun驱动,但是 lsmod | grep tun 却没有任何结果,所以实际上,这 ...

  2. java时间差

    以下代码没什么意义,只是记录 long mstart = System.nanoTime(); int mIndex = 0 ; for (int i = 0; i < 100000000; i ...

  3. Spring Boot2(006):关于配置类(Configuration Classes)和配置(Configuration)

    一.配置类(Configuration Classes) Spring Boot 支持基于 xml 的配置,但更偏向于使用基于 Java 的配置,通常建议使用定义有 main 方法的主 @Config ...

  4. WTM框架在开发过程中如何动态迁移表和创建表

    官方迁移方法:https://wtmdoc.walkingtec.cn/#/Data/Migration 但是在实际开发过程中使用Add-Migration 方法迁移会发现,把系统内置的表也全部带出来 ...

  5. STM32中ARM系列编译工具链的编译宏选择(__CC_ARM、__ICCARM__、__GNUC__、__TASKING__)

    一 前言 stm32 f103中.关系到一个选择何种编译宏的问题.这里就梳理一下吧. 二 正文 1  在 core_cm3.h 文件中,有如下代码: #if defined ( __CC_ARM ) ...

  6. 开源DDD设计模式框架YMNNetCoreFrameWork第四篇-增加YMNSession,增加异常处理,增加策略授权

    1.增加YMNSession,可以获取当前登录的用户信息 2.增加异常处理,不要使用过滤器,过滤器只能获取到mvc异常 3.增加策略授权,策略授权支持用户角色.用户名授权,初步实现 代码地址:http ...

  7. 【CS224n-2019学习笔记】Lecture 1: Introduction and Word Vectors

    附上斯坦福cs224n-2019链接:https://web.stanford.edu/class/archive/cs/cs224n/cs224n.1194/ 文章目录 1.课程简单介绍 1.1 本 ...

  8. POJ 2155 二维线段树 经典的记录所有修改再统一遍历 单点查询

    本来是想找一个二维线段树涉及懒惰标记的,一看这个题,区间修改,单点查询,以为是懒惰标记,敲到一半发现这二维线段树就不适合懒惰标记,你更新了某段的某列,但其实其他段的相应列也要打标记,但因为区间不一样, ...

  9. sudo 提权漏洞(CVE-2019-14287)复现 (10.16 第二十二天)

    sudo是Linux系统命令,让普通账号以root身份去执行某些命令,比,安装软件.查看某些配置文件.关机.重启等操作,如果普通账号需要使用sudo需要修改配置文件/etc/sudoers,将sudo ...

  10. UVA - 1615 Highway(高速公路)(贪心+区间选点)

    题意:给定平面上n(n<=105)个点和一个值D,要求在x轴上选出尽量少的点,使得对于给定的每个点,都有一个选出的点离它的欧几里德距离不超过D. 分析: 1.根据D可以算出每个点在x轴上的可选区 ...