基本语法
<li v-for:"(item,index) of items" key="index">index是循环指针，key可以是index，但是更好是遍历对象的唯一标识符
虚拟DOM中key的作用：key是虚拟DOM中对象的标识，当数据变化，vue会根据新数据生成新虚拟DOM，随后进行diff算法新旧虚拟DOM差异比较，对比规则如下：
- 旧虚拟DOM中找到了和新虚拟DOM中相同的key
若虚拟DOM中内容未变，直接使用之前的虚拟DOM
若虚拟DOM中内容变了，则根据新虚拟DOM生成DOM，替换之前的DOM- 旧虚拟DOM中未找到与新虚拟DOM相同的key
创建DOM，渲染到页面
index作为key的列表，结构中包含错误输入类的虚拟DOM，列表产生错误更新，页面出现问题
id作为key的列表，使用遍历对象唯一标识符，不会出现问题
对数据的逆序操作会产生没有必要的DOM更新
列表中有输入类DOM更新会产生错误的DOM更新，页面会出现问题
v-for指令 基本语法 index是循环指针，key可以是index，但是更好是遍历对象的唯一标识符 key作用...
1、列表渲染 ① v-for — 根据一组数组的选项列表进行渲染； 语法： value,key in items ...
知识点： v-for指令 用于展示列表数据 语法：v-for="(item,index) in xxx" :key...
vue列表渲染v-for类似js语言中的for循环，用vue列表渲染指令渲染数组，可以类比js中用for循环遍历数...
参考：Vue列表渲染(1) 列表渲染示例 (2) :key 值的选取 使用 v-for 循环 array 中 it...
v-for指令的使用 在 Vue 中，可以使用 v-for 指令绑定数据到数组来渲染一个列表。 使用 v-for ...
8.vue中 key 值的作用？答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地...
一、前言 条件渲染和列表渲染其实就是使用vue的v-if和v-for两个指令来控制是否渲染和循环渲染的逻辑。 二、...
一、v-for 列表渲染 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 ite...
Vue 初体验 语法 Mustache语法： {{}} v-for :将一个数组渲染成一个列表 {{item.m...
本文标题：VUE指令语法|列表渲染v-for及key原理和作用
本文链接：https://www.haomeiwen.com/subject/sqpyqdtx.html
网友评论