文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一文带你详细了解Vue中的v-for

2022-11-13 18:50

关注

v-for

作用: 列表渲染,所在标签结构,按照数据数量,循环生成。指令写在谁身上,就循环创建谁

1.语法:

v-for = "(值变量,索引变量) in 目标结构" :key = 索引变量

v-for = "值变量 in 目标结构 :key = 索引变量"

目标结构:可以是数组,对象,字符串

2.数组方法如果修改了原数据就会更新 页面,如果没有修改,则不会,但可以重新赋值给变量让你页面更新

3.v-for中的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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯