首页 > 其他分享 >计算属性

计算属性

时间:2023-03-21 09:33:06浏览次数:32  
标签:computed RGB rgb 计算 属性 log

计算属性

计算属性,定义为“方法”,定义到 computed 节点之下

在使用计算属性的时候,当普通的属性使用即可,不需要 “()”

好处:

1. 实现了代码的复用
2. 只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值!

例:设定一个有大小的盒子,修改输入框中的rgb,会使得盒子跟着一起变色。

①未使用计算属性

style

.box {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
}

template

<div class="app">
    <!-- 数字部分 -->
    <div>
      <span>R:</span>
      <input type="text" v-model.number="r">
    </div>
    <div>
      <span>G:</span>
      <input type="text" v-model.number="g">
    </div>
    <div>
      <span>B:</span>
      <input type="text" v-model.number="b">
    </div>
    <hr>
    
    <!-- 图块 -->
    <div class="box" :style="{ backgroundColor: `rgb(${this.r}, ${this.g}, ${this.b})`}">
      <p>这里的RGB值是:{{ `rgb(${this.r}, ${this.g}, ${this.b})`}}</p>
      <button @click="show">单击按钮,在终端打印RGB的值</button>
    </div>
</div>

script

data: {
        r: 10,
        g: 111,
        b: 44
},
methods: {
        // 点击按钮,在终端显示
        show() {
          // 以下两行等效,
          // console.log(this.rgb)
          console.log(`rgb(${this.r}, ${this.g}, ${this.b})`)
        }
}

②改进为计算属性:

template更改

    <!-- 图块 -->
    <div class="box" :style="{ backgroundColor: rgb }">
      <p>这里的RGB值是:{{ rgb }}</p>
    </div>

script增加

computed: {
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }

很明显,使用计算属性后,大段的rgb(${this.r}, ${this.g}, ${this.b}变成了this.rgb,代码变得高效复用

标签:computed,RGB,rgb,计算,属性,log
From: https://www.cnblogs.com/tupo/p/17238787.html

相关文章

  • CSS Content 属性的几种妙用和技巧
    Content属性是CSS中一个非常有用的属性,可以用于插入生成内容,如在::before和::after伪元素中添加文本或图标。Content属性的特点:Content属性仅可用于::before......
  • 计算并发用户数五种方法
    https://blog.csdn.net/MENG_Q_Z/article/details/125034279 一、经典公式1:  一般来说,利用以下经验公式进行估算系统平均并发用户数和峰值: 1)平均并发用户数 C=......
  • Flink计算框架概述
    Flink是一个针对流数据和批数据的分布式处理引擎,主要用Java代码实现。目前,Flink主要还是依靠开源社区的贡献来发展的。对于Flink,其处理的数据主要是流数据,批数据只是流......
  • 树,根据节点的值计算父节点的值
    前段时间回答了一个类似的问题,产生了写一篇博客的想法。这个问题确实存在一些常见的的应用场景,比如一个多层组织结构中,已知每个员工的绩效分,希望计算各级部门的绩效分以便对......
  • 计算机系统性能评价与性能分析
    参考:https://foxsen.github.io/archbase/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%B3%BB%E7%BB%9F%E6%80%A7%E8%83%BD%E8%AF%84%E4%BB%B7%E4%B8%8E%E6%80%A7%E8%83%BD%E5%88%86%E6%......
  • 表格属性
    表格属性 使用css可以使HTML表格更美观表格边框指定CSS表格边框,使用border属性table,td{  border:1pxsolidblack;}折叠边框border-collapse属性设置表格的......
  • 文本属性
    文本属性 text-align指定元素文本的水平对齐方式值描述left文本居左排列,默认值right把文本排列到右边center把文本排列到中间h1{text-align:cen......
  • 定位、opacity透明度属性、visibility和display隐藏元素
    定位、opacity透明度属性、visibility和display隐藏元素1.定位position(确定的是移动的基准)static,默认值。静态的。(不让动)relative,相对。相对于自身的位置来移动......
  • 解决Windows远程桌面“由于安全设置错误, 客户端无法连接到远程计算机”
     远程桌面连接时报“由于安全设置错误,客户端无法连接到远程计算机”  解决方法如下:一、打开运行对话框,两种方式,点击开始→运行或Win+R,输入“gpedit.msc”,打开本......
  • Openstack移除计算节点
    1、查看所有计算节点sourceadmin-openrcnovaservice-list2、选择要删除的计算节点,删除计算节点ID,并检查节点情况novaservice-deleteIDnovaservice-list3、查看网络neut......