一文带你详细了解Vue中的v-for
更新时间：2022年10月25日 09:59:55 作者：前端楠戈
v-for循环遍历数据,永远不要把v-if和v-for同时用在同一个元素上,下面这篇文章主要给大家介绍了关于如何通过一文带你详细了解Vue中v-for的相关资料,需要的朋友可以参考下
v-for
作用： 列表渲染，所在标签结构，按照数据数量，循环生成。指令写在谁身上，就循环创建谁
1.语法：
v-for = "(值变量，索引变量) in 目标结构" ：key = 索引变量
v-for = "值变量 in 目标结构 ：key = 索引变量"
目标结构：可以是数组，对象，字符串
2.数组方法如果修改了原数据就会更新 页面，如果没有修改，则不会，但可以重新赋值给变量让你页面更新
3.v-for中的key作用：在更新的时候：
- 有key，按照key比较，key设置为index：等于没设，就地复用
- 无key，就地更新
4.v-for中key
唯一不重复的字符串或者数值，数组中的id
key在使用过程中，有id用id，无id用索引
5.key的好处
可以提高更新的性能
v-set
作用：因为vue是数据驱动页面的，所以修改原数组中可以使用this.arr[0]='测试'但是，由于官方vue2特有的bug，导致这样修改原数组失效，虽然数组确实改变了，但是页面直接没更新，如果需要这样修改数据，就需要$set方法来修改
方法：
this.$set(修改数组，索引，‘修改的内容')
重绘和回流
- 重绘：元素的颜色/透明度发生变化
- 回流：元素的几何信息（宽度/位置）发生变化
- 回流是把结构重新画出来，重绘给你上色
- 回流一定触发重绘，但重绘不一定会引起回流
虚拟DOM
含义：本质上是一个js对象，保存DOM关键信息
好处：提高DOM更新的性能，不频繁操作真实的DOM，在内存中找到变化部分，再更新真实DOM相应属性或内容（打补丁）
computed计算属性
语法:定义在computed中和data（）{}并齐
事例：
computed:{
totalPrice(){//计算属性名
set(val){ //在计算机属性被修改时执行
//val是计算属性赋的值
}
get(){ //get在计算机属性被调用（访问）时执行
//必须return一个结果
}
return this.count*this*this.price//返回运算结果
}
}
缓存：计算属性，基于依赖项的值进行缓存，依赖的变量不变，都直接从缓存取结果（带缓存）
总结
到此这篇关于Vue中v-for的文章就介绍到这了,更多相关Vue的v-for内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文通过实例代码给大家介绍了Vue中实现拖放排序功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue3中的watch()的用法和具体作用,通过合理和熟练使用watch()方法，开发者可以更加高效地完成前端开发工作，需要的朋友可以参考下2023-04-04
这篇文章主要给大家介绍了关于vue-router路由懒加载及实现的3种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法
这篇文章主要介绍了一文搞懂Vue3中的异步组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
基于Vue3实现前端埋点上报插件并打包发布到npm的详细过程
这篇文章主要介绍了基于Vue3实现一个前端埋点上报插件并打包发布到npm,本项目采用pnpm进行Monorepo环境搭建,因为未来这个项目可能会加入更多的工具包，需要的朋友可以参考下2022-10-10
面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，它的作用是告诉访问者他们在网站中的位置以及如何返回，本文为大家介绍了实现面包屑导航的正确方式，需要的可以参考一下2023-06-06
这篇文章主要介绍了使用vue-touch报priority错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
今天小编就为大家分享一篇vue.js 双层嵌套for遍历的方法详解, 类似php foreach()，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
当你跑起一个项目的时候,第一步需要先安装依赖npm install,下面这篇文章主要给大家介绍了关于npm install安装报错的几种常见情况,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了Vue插槽原理与用法,结合实例形式详细分析了vue.js插槽内容、具名插槽、作用域插槽等相关原理与使用方法,需要的朋友可以参考下2019-03-03
最新评论