一文带你详细了解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的nextTick方法是用来在下次DOM更新周期中执行回调函数的方法，用于DOM操作后获取DOM更新后的状态，使用场景包括异步更新DOM、获取更新后元素的位置等情况，一般结合Vue的异步更新机制和watch监听器使用，实现方式可使用Promise、setTimeout等异步方法2023-04-04
这篇文章主要介绍了vue中使用mixins/extends传入参数的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要给大家介绍了Vue.js在使用中的一些注意知识点，文中介绍的非常详细，对大家学习或者使用Vue.js具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-04-04
这篇文章主要介绍了解读vue页面监听store值改变问题，具有很好的参考价值，希望对大家有所帮助。2022-10-10
Element UI是一套基于Vue的桌面端组件库,封装好了很多常用的UI组件,下面这篇文章主要给大家介绍了关于element如何初始化组件功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了Vue的diff算法原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
Vuepress生成文档部署到gitee.io的注意事项及说明
这篇文章主要介绍了Vuepress生成文档部署到gitee.io的注意事项及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue-property-decorator的简单知识,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了解决Element ui导航栏选中背景色刷新消失的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue.js实现插入数值与表达式的方法,结合实例形式分析了vue.js常见的3种插入数值实现方式,并总结了vue.js插值与表达式相关使用技巧,需要的朋友可以参考下2018-07-07
最新评论