vue 列表渲染 v-for

一、v-for 基本使用

<!--v-for 指令1. 用于展示列表数据2. 语法：v-for="(item, index) in xxx" :key="yyy"3. 可遍历：数组、对象、字符串（用得少）、指定次数（用得少）
-->
<div id="root"><ul><!-- 遍历数组 --><li v-for="(item, index) in persons" :key="index">{{index}} --{{item.name}} --{{item.age}} --{{item.sex}}</li></ul><ul><!-- 遍历对象 --><li v-for="(item, index) in personObject" :key="index">{{item.name}} --{{item.age}} --{{item.sex}}</li></ul><ul><!-- 遍历字符串 --><li v-for="(item, index) in str" :key="index">{{index}} -- {{item}}</li></ul><ul><!-- 遍历数字 --><li v-for="(item, index) in 5" :key="index">{{index}} -- {{item}}</li></ul>
</div>

二、v-for 中的 key 的原理

<!--面试题：react、vue 中的 key 有什么作用？（ key 的内部原理)1. 虚拟 DOM 中 key 的作用：key 是虚拟 DOM 对象的标识，当数据发生变化时，Vue 会根据【新数据】生成【新的虚拟 DOM 】随后 Vue 进行【新虚拟 DOM 】与 【旧虚拟 DOM 】的差异比较，比较规则如下：2. 比较规则：(1). 旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key:①. 若虚拟 DOM 中内容没变，直接使用之前的真实 DOM②. 若虚拟 DOM 中内容变了，则生成新的真实 DOM, 随后替换掉页面中之前的真实 DOM(2). 旧虚拟 DOM 中找到与新虚拟 DOM 相同的 key:创建新的真实 DOM , 随后渲染到页面3. 用 index 作为 key 可能会引发的问题：1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实 DOM 更新 ==> 界面效果没问题，但效率低2. 如果结构中还包含输入类的 DOM :会产生错误 DOM 更新 ==> 界面有问题4. 开发中如何选择 key ? :1. 最好使用每条数据的唯一标识作为 key , 比如 id、手机号、身份证号、学号等唯一值2. 如果不存在对数据的逆序添加、逆序删除等破坏结构顺序操作，仅用于渲染列表用于展示使用 index 作为 key 是没有问题的-->
<div id="root"><ul><!-- 遍历数组 --><li v-for="(item, index) in persons" :key="item.id">{{item.id}} --{{item.name}} --{{item.age}} --{{item.sex}}<input type="text" name="" id=""></li></ul><p><button @click="add">按钮</button></p>
</div>

vue 列表渲染 v-for相关推荐

【猿说VUE】Vue列表渲染
8 VUE基础:列表渲染我们可以用 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则 ...
26.Vue列表渲染中key的作用与原理（内含虚拟DOM的对比算法详解）
目录 1.暴露问题,使用index作为key 2.使用唯一标识p.id作为key 3.不写key的配置 4.key的工作原理及虚拟DOM的对比算法 5.总结 25.Vue列表渲染_爱米酱的博客-CSD ...
Vue基础之Vue列表渲染
列表渲染我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名 ...
万张图片，流畅体验——记一次 Vue 列表渲染
简介: ### 背景团队目前的Web端产品中需要显示两个列表视图:卡片列表和条目列表,并且在点击切换按钮的时候,对两个列表进行切换显示. ![条目列表](https://ata2-img.oss-c ...
Vue列表渲染---vue工作笔记0009
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 然后我们再来看一下使用vue去,实现列表的渲染我们要实现上面这个类似的功能,通过这个功能来看看v ...
vue列表渲染中key的作用_vue中：key的作用
因为不理解 :key(v-bind:key),网上查了一些的资料,这篇写得非常不错,很简洁清楚. 其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的 ...
vue列表渲染中key的作用_列表渲染和Vue的v-for指令
Web渲染是Web开发中最常用的实战之一.动态列表渲染通常用于简洁友好的格式向用户渲染一系列相似的分组信息.在我们使用的每个Web应用程序中,都可以看到很多内容列表被用于Web应用程序当中. 在这篇文 ...
7.Vue 列表渲染
在 v-for 里使用值范围 v-for 可以接受整数.在这种情况下,它会把模板重复对应次数. <div><span v-for="n in 10">{{ ...
Vue列表渲染v-for ... of ... 与 v-for ... in ...区别
- V-for循环遍历数组时推荐使用of,语法格式为(item,index) item:迭代时不同的数组元素的值 index:当前元素的索引 -for循环遍历对象时推荐使用in,语法格式为(item, ...

vue 列表渲染 v-for

vue 列表渲染 v-for相关推荐

最新文章

热门文章