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

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

<!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. sql去重常用的基本方法

    1.存在两条完全相同的纪录 select distinct * from table(表名) where (条件)   2.存在部分字段相同的纪录(有主键id即唯一键) 如果是这种情况的话用disti ...

  2. 【ASeeker】Android 源码捞针，服务接口扫描神器

    ASeeker是一个Android源码应用系统服务接口扫描工具. 项目已开源: ☞ Github ☜ 如果您也喜欢 ASeeker,别忘了给我们点个星. 说明 ASeeker 项目是我们在做虚拟化分身 ...

  3. Android无障碍自动化结合opencv实现支付宝能量自动收集

    Android无障碍服务可以操作元素,手势模拟,实现基本的控制.opencv可以进行图像识别.两者结合在一起即可实现支付宝能量自动收集.opencv用于识别能量,无障碍服务用于模拟手势,即点击能量. ...

  4. Redis八股文（大厂面试真题）

    号:tutou123com​我是小宋编码,Java程序员 ,只熬夜但不秃头. 关注我,带你轻松过面试.提升简历亮点如果你觉得对你有帮助,欢迎关注[1] 内容目录 1.说说redis,了解redis源码 ...

  5. 为什么不推荐使用Linq?

    相信很多.NETer看了标题,都会忍不住好奇,点进来看看,并且顺便准备要喷作者! 这里,首先要申明一下,作者本人也非常喜欢Linq,也在各个项目中常用Linq. 我爱Linq,Linq优雅万岁!!!( ...

  6. Android Camx 架构介绍

    Android Camx 架构介绍 原文链接:深入理解高通Camx Hal 概览 高通平台的Camera架构从以前用的mm-camera转向camx-chi,完全是两样不同的东西:软件架构不同.代码位 ...

  7. CF187D 题解

    模拟考最后一题是这道题,要是数组开大就场切了,最后不小心挂了 \(15\) 分. 以下是考场思路: 考虑这样一个问题,所有时间对 \(r+g\) 取余是可以的.毕竟红绿灯是一个循环. 再考虑这样一个东 ...

  8. yb课堂 搭建node环境和npm安装 《二十六》

    搭建node环境和npm安装 什么是NodeJS? Node.js就是运行在服务端得JavaScript 什么是npm? nodejs的包管理工具,可以下载使用公共仓库的包,类似maven包安装分为本 ...

  9. 转载 | [AcSaveAsType -cad版本代号对应数字 ] & [AutoCAD的DWG文件格式版本代号列表]

    1.  AcSaveAsType -cad版本代号对应数字 doc.SaveAs("D:\AutoCAD\1.dwg", 61) # 将当前文件另存为PyAutoCAD_SaveA ...

  10. 4 安卓h5分享功能未实现

    安卓h5点击分享没有复制链接到剪切板