vue中的计算属性和class、style的绑定 您所在的位置:网站首页 css与style vue中的计算属性和class、style的绑定

vue中的计算属性和class、style的绑定

2024-02-26 23:52| 来源: 网络整理| 查看: 265

计算属性:

模块中的表达式存在过多的逻辑会导致代码臃肿并且过重造成难以维护

在计算属性中可以进行复杂的逻辑,可以进行运算、函数调用等,然后返回自己所想要的结果

在计算属性中计算属性可以进行相互的依赖并且可以依赖不同的vue实例,其中的实例只要一项数据进行变化,计算属性就会进行重新的执行,视图也会就行更新

在计算属性中有两个方法,一个getter,一个setter,一般会直接使用getter,对于setter而言很少在业务逻辑中使用到

函数定义和计算属性不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值;使用计算属性不会像函数定义那样执行函数,会直接返回计算属性的结果,当然也会有其他的说法,对于计算属性会进行缓存的效果

在这样的计算属性中时间是不会进行重复的计算,进行一次缓存后计算属性就不会在返回新的时间值,不会进行新的渲染;当然对于计算属性好处还是相当的多的,不会让初始化的定义非常多,不需要方法去重复的执行

比如nextNodeConfig中的nodeList不需要在methods中就行for循环直接在计算属性进行计算,还可以在nodeList在进行变化的时候进行再次计算,不需要去重复的调用方法来实现业务功能

当然还有侦听器,在vue中也提供了侦听器,当时使用侦听器的时候大部分应该是在数据变化是的,且为执行了异步的操作或者量比较打的时候进行使用

class、style绑定:

class的绑定分为对象和数组:对象中为 

 

当然绑定数组的和绑定的对象的大差不差的,当然在绑定的过程中也可以使用计算属性比如可以把上面的三步运算放入计算属性中等等

style的绑定也是分为对象和数组:对象中为

当然其中的名字使用驼峰的命名方式,当然也可以使用初始化的方式进行使用绑定样式



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有