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

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

<!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. sort awk 文本处理命令

    sort: 1.将文件的每一行作为一个单位,相互比较 2.默认升序 3.以字符来进行对比,从首字符开始往后,依次按ASCII码值排序 sort 显示文件内容 (类似cat) 选项: -u 去掉重复行 ...

  2. CompatTelRunner CPU 占用 22% win10 笔记本常常无故风扇狂转

    CompatTelRunner CPU 占用 22% win10 笔记本常常无故风扇狂转 CompatTelRunner.exe is also known as Windows Compatibil ...

  3. 关于mybatis中的${}、#{},

    mybatis作为一个轻量级的ORM框架,应用广泛,其上手使用也比较简单:一个成熟的框架,必然有精巧的设计,值得学习. 在使用mybatis框架时,在sql语句中获取传入的参数有如下两种方式: ${p ...

  4. Do not access Object.prototype method 'hasOwnProperty' from target object

    hasOwnProperty 判断对象是否为空 在使用 hasOwnProperty 判断对象是否为空时遇到了一下问题,总结一下 // Do not access Object.prototype m ...

  5. Linux 提权-Capabilities

    本文通过 Google 翻译 Capabilities – Linux Privilege Escalation - Juggernaut-Sec 这篇文章所产生,本人仅是对机器翻译中部分表达别扭的字 ...

  6. Niagara 物联网技术基础应用(文章修复中，不定时更新)

    新手指南 前言 鉴于市面上有关Niagara物联网技术资料较少,笔者结合自生参加竞赛的经历编写此指南,该指南旨在让新手快速上手Niagara workbench 主要分以下几个模块讲解: 物联网软件平 ...

  7. Unity中使用ProtocolBuffer

    Unity中使用ProtocolBuffer unityProtocolBufferUnity ProtocolBuggerC# ProtocolBuffer Unity中使用ProtocolBuff ...

  8. 一文学完所有的Hive Sql（两万字最全详解）

    Hive Sql 大全 本文基本涵盖了Hive日常使用的所有SQL,因为SQL太多,所以将SQL进行了如下分类: 一.DDL语句(数据定义语句): 对数据库的操作:包含创建.修改数据库 对数据表的操作 ...

  9. Vue3 中的 v-bind 指令：你不知道的那些工作原理

    前言 v-bind指令想必大家都不陌生,并且都知道他支持各种写法,比如<div v-bind:title="title">.<div :title="t ...

  10. Netty（二）线程模型

    1. Netty概述 虽然Java已经提供了NIO,但原生NIO仍存在部分问题: NIO的类库和API繁杂,使用麻烦.需要熟练掌握Selector.ServerSocketChannel.Socket ...