计算属性在编写的时候是一个方法

但是在调用的时候作为属性使用

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src="./../lib/vue.js"></script>

  <script src="./../lib/jquery-3.6.0.min.js"></script>

  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.6.0/dayjs.min.js"></script>

  <style>

    .box {

        width: 300px;

        height: 300px;

        border: 1px solid black;

    }

  </style>

</head>

<body>

<div id="app">

    <div>

        RGB-R: <input type="text" v-model.number="rgb_R"> <br>

        RGB-G: <input type="text" v-model.number="rgb_G"> <br>

        RGB-B: <input type="text" v-model.number="rgb_B"> <br>

    </div>

    <hr>

    <!-- 组件绑定的时候，注意是属性！，不是方法，不要加括号 -->

    <div class="box" :style="returnRGB">

        <span>rgb({{`${rgb_R}, ${rgb_G}, ${rgb_B}`}})</span>

        <!-- <span>{{this}}</span> -->

    </div>

</div>

<script>

const VIEW_MODEL1 = new Vue({

  el: '#app',

  data: {

    rgb_R: 99,

    rgb_G: 220,

    rgb_B: 99,

  },

  // 注意，计算属性，里面的方法名称，最后提供给组件的是一个变量属性

  // 计算属性的依赖源发生变化，属性将会重新计算

  computed: {

    returnRGB() {

      return {

          background: `rgb(${this.rgb_R}, ${this.rgb_G}, ${this.rgb_B})`

      }

    }

  }

})

</script>

</body>

</html>

如果属性需要传递参数，需要return一个闭包的处理

https://blog.csdn.net/acoolgiser/article/details/89056072

　　

【Vue2】Computed 计算属性的更多相关文章

  1. vue computed计算属性和watch监听属性解疑答惑

    computed计算属性     计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...

  2. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  3. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  4. Vue（七）：computed计算属性

    简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...

  5. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  6. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. computed 计算属性

    wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=wepy%e9%a1%b9%e7%9b%ae%e7%9a%8 ...

  8. vue computed计算属性 watch监听

    计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...

  9. vue-methods方法与computed计算属性的差别

    好吧,我就是单纯的举个例子:实现显示变量 message 的翻转字符串 第一种:methods:我们可以通过在表达式中调用方法来达到同样的效果: 第二种:computed:计算属性 上面的2中方法都实 ...

  10. Vue学习笔记【31】——Vue路由（computed计算属性的使用）

    computed计算属性的使用 默认只有getter的计算属性:  <div id="app">    <input type="text" ...

随机推荐

  1. 修复Apache Log4j 2 远程代码执行漏洞jar包(jdk8编译)

    Apache Log4j2是一个基于Java的日志记录工具.该工具重写了Log4j框架,并且引入了大量丰富的特性.该日志框架被大量用于业务系统开发,用来记录日志信息.大多数情况下,开发者可能会将用户输 ...

  2. itest(爱测试) 紧急 BUG 修复版(4.5.6)发布，,开源BUG 跟踪管理 & 敏捷测试管理&极简项目管理软件

    itest 简介 itest 开源敏捷测试管理,testOps 践行者,极简的任务管理,测试管理,缺陷管理,测试环境管理4合1,又有丰富的统计分析.可按测试包分配测试用例执行,也可建测试迭代(含任务, ...

  3. 《Qt学习系列笔记》--章节索引

    Qt下载.安装及环境搭建:https://www.cnblogs.com/mrlayfolk/p/13111349.html Qt初始化代码基本说明:https://www.cnblogs.com/m ...

  4. 01-布局扩展-BFC完成圣杯布局

    <!DOCTYPE html>   <html lang="en">   <head>   <meta charset="UTF ...

  5. vue局部注册

    只能在当前注册它的vue实例中使用,通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件 var Child = { template: '<div> ...

  6. OOP第一阶段题集总结

    一.前言 知识点:数组,字符串的使用,链表,hashmap,泛型的使用,正则表达式的使用,类的设计,类与类之间的关系,单一职责. 题量:题目数量为5+4+3,数量适中,其中都是前几题较简单,最后一题较 ...

  7. SDL3 入门（1）：Hello, SDL3!

    在本系列中我们使用 Windows Terminal + Powershell 组合作为我们在 Windows 系统下的终端工具,Windows 11 自带该环境.你也可以使用任意自己喜欢的终端环境代 ...

  8. SM4Utils加解密demo

    SM4Utils加解密demo package com.example.core.mydemo.sm4; import cn.org.bjca.utils.SM4Utils; public class ...

  9. 《软件性能测试分析与调优实践之路》第二版-手稿节选-Mysql数据库性能定位与分析

    在做MySQL数据的性能定位前,需要先知道MySQL查询时数据库内部的执行过程.只有弄清SQL的执行过程,才能对执行过程中的每一步的性能做定位分析.如图6-2-1所示. 图6-2-1 从图中可以看到, ...

  10. CodeForces 1935A

    题目链接:Entertainment in MAC 思路 当当前操作次数n为偶数时,若原字符串大于反转字符串则可以将原字符串反转n - 2次,则得到的还是原字符串,此时反转一次,并将其再次反转的字符串 ...