首页 > 其他分享 >计算属性的名字

计算属性的名字

时间:2023-06-15 19:01:31浏览次数:31  
标签:计算 dom 元素 名字 虚拟 key 属性

vue的就地复用策略:
Vue会尽可能的就地(同层级,同位置)最对比,如果原来的存在不在重新创建。
什么是虚拟dom:
用虚拟的dom来模拟真实的dom元素。
为什么要有虚拟dom的概念呢?
因为让元素新旧做对比。
为什么要做对比?
渲染效率高一些。
vue在渲染页面之前,会生成虚拟dom(type attributes text children)在内存里面。
当重新渲染的时候: 会用新的虚拟dom和旧的虚拟dom做对比---------------相同的内容就地复用,不同的重新创建。
对比啥呢?
新旧元素的属性 内容 元素------diff算法。
策略1:
1.先同层级根元素做比较,如果根元素变化,那么不考虑复用,整个dom树重建
2.如果根元素没有变化,则比较元素的属性。 有相同的属性复用, 不同的属性新添加。
3.默认按照下标的方式的比较
3.1先比较元素是否相同的。
3.2在比较元素的属性是否相同。
3.3比较元素的内容是否相同。
:key:
可以通过key去更改比较顺序。 注意key值一定不可以重复!!! 是一个基本数据类型。
注意点:
1.有id用id当做key
2.没有id 用索引当做key
样式操作:
类名操作:

124


124



124


124






style:

1234


1234



1234



12345


activeColor: 'red',
fontSize: '30px',
objClass:{
color:'red',
fontSize:'30px'
}
计算属性:
一个属性不存在, 是计算得来的属性----计算属性
使用:
computed:{
计算属性的名字(){
return '值'
}
}
{{计算属性的名字}}
计算属性和属性的区别是什么:
1.如果返回一个具体的值 两者没有区别 和属性的方式是一样的
2.计算属性可以依赖于一个值的变化:
譬如: 意味着: name变化就会重新执行这个函数 把这个值给计算属性
computed:{
计算属性的名字(){
return this.name
}
}
注意点:
计算属性和属性或者方法都不可以重名
计算属性里面必须要有return值

标签:计算,dom,元素,名字,虚拟,key,属性
From: https://www.cnblogs.com/jiaoliuxuexi/p/17483847.html

相关文章

  • JPA查询实体的部分属性值
    JPA查询实体的部分属性值https://blog.csdn.net/mojiewangday/article/details/128255531背景需要根据指定条件查询数据的部分字段,因此就不能使用jpa的findAll()方法了,因此选择利用@Query注解写sql实现,踩了几个坑,以此留作记录。实现1.根据唯一id查询指定单个字段 //根......
  • 项目说明 | 网页计算器自动化测试项目
    需求:1、对网页计算器,进行加法的测试操作。通过读取数据文件中的数据来执行用例。2、网址:http://cal.apple886.com/测试点:1、加法:1+1=22+9!=10...2、减法:3-1=25-3!=8...3、乘法:2*3=65*7!=2...4、除法:8/2=49/3!=2...技术:1、使用openpyxl读取e......
  • 面向对象编程-实例属性和类属性
    在实例中绑定属性,和直接在类种绑定属性是不一样的,实例中绑定的只能在实例中用如果Student类本身需要绑定一个属性,所有实例都可以访问,那么可以这么定义classStudent(object):name='Student'点击查看代码classStudent(object):score=100#定义类属性def__in......
  • sql server 计算两个时间相差(年月日时分秒)(收藏)
    selectdatediff(year,开始日期,结束日期);--两日期间隔年selectdatediff(quarter,开始日期,结束日期);--两日期间隔季selectdatediff(month,开始日期,结束日期);--两日期间隔月selectdatediff(day,开始日期,结束日期);--两日期间隔天selectdatediff(week,开始日期,......
  • C++类中static不计算入sizeof
    classMyParam{public:inta;staticintb;intc;staticinty;staticintz;};sizeof(MyParam)=8intMyParam::b=10;intMyParam::z=10;intmain(){MyParamp;MyParamdest;p.a=10;p.b=2;p.c=4;memcpy(&am......
  • background属性
     <!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="author"content="http://www.softwhy.com/"/><title></title><styletype="text/css">/*通......
  • 详解spring事务属性
    Spring声明式事务让我们从复杂的事务处理中得到解脱。使得我们再也无需要去处理获得连接、关闭连接、事务提交和回滚等这些操作。再也无需要我们在与事务相关的方法中处理大量的try…catch…finally代码。我们在使用Spring声明式事务时,有一个非常重要的概念就是事务属性。事务......
  • 华为认证 | HCIE-云计算 考试大纲
    上次更新了HCIP的Datacom考纲,好多小伙伴来询问云计算HCIE的相关内容,先安排上!还想看什么方向的考纲,私信我,发送暗号「考纲」,我直接给你发更详细的内容哈!01华为云计算HCIE技术华为云计算HCIE培训定位国内外大中型云数据中心的规划、设计、操作、部署以及运维优化。设计内容包含不限于......
  • 【JS错题总结】对象属性相关
    下面代码的输出结果:varobj={brand:'apple',price:5999}Object.defineProperty(obj,'id',{value:1})Object.defineProperty(obj,'price',{configurable:false})console.log(Object.keys(obj).length);//2//apple5999f......
  • CSS(语义化标签、多媒体标签、新表单元素、属性选择器、结构伪类选择器、伪元素选择器
    一、HTML5新特性概述HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。1语义化标签(★★)以前布局,我们基本用div来做。di......