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

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

<!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. Oracle使用序列和触发器设置自增字段

    一.创建一张工作表 例: create table tv(ID NUMBER primary key,TVNAME VARCHAR(16),ISPASS NUMBER);   二.先创建一个序列 cr ...

  2. 猪齿鱼数智化开发管理平台 1.3.0-alpha发布，欢迎立即体验！

    ​​ 2022年3月18日,数智化开发管理平台猪齿鱼 Choerodon发布 V1.3-alpha版本,多项功能新增或优化,多管齐下,全面提升团队工作效能!通过提供体系化方法论和协作.测试.DevOp ...

  3. CSS3随机背景图片切换特效

    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` CSS3随机背景图片切换特效 日期:2018-5-16 阿 ...

  4. 《Objective-C Direct Methods》学习笔记

    原文通过对Objective-C发展史.Objective-C中Runtime的动态派发,C语言的直接派发进行铺垫介绍,引出了direct methods这个"新特性"(文章写于2 ...

  5. spring数据验证

    一般情况下,我们并不推荐在服务端做基础的数据校验,因为这有一个很主要的问题:它加重了服务器的负载,如果并发多,这种负载就更加明显. 如果我们跟踪一个简单的Controller方法执行过程,就会发现Sp ...

  6. arm linux 移植 i2c-tools 与 简单使用

    介绍 i2c-tool是一个专门调试i2c的开源工具.可获取挂载的设备及设备地址,还可以在对应的设备指定寄存器设置值或者获取值等功能,对于驱动以及应用开发者比较友好. i2c-tool:v3.0.3 ...

  7. Linux系统获取开发板的文件系统并打包成img文件

    应用情形: 在实际的开发中,由于原系统包含的功能有限,而根据项目的需要,安装了相应的库及运行项目程序所创建的各种文件,和所做 的各种配置,想将调试好的系统打包发布,进行批量生产,就可参考本文提供的方法 ...

  8. 《DNK210使用指南 -CanMV版 V1.0》第五章 编译CanMV固件

    第五章 编译CanMV固件 1)实验平台:正点原子DNK210开发板 2) 章节摘自[正点原子]DNK210使用指南 - CanMV版 V1.0 3)购买链接:https://detail.tmall ...

  9. 【VMware vSAN】vSAN Data Protection Part 1：安装部署。

    VMware vSAN 8 U3 中新引入了基于 vSAN ESA 的全新 vSAN Data Protection 功能,借助 vSAN Data Protection 功能,您可以使用在 vSAN ...

  10. 基于Bootstrap Blazor开源的.NET通用后台权限管理系统

    前言 今天大姚给大家分享一个基于Bootstrap Blazor开源的.NET通用后台权限管理系统,后台管理页面兼容所有主流浏览器,完全响应式布局(支持电脑.平板.手机等所有主流设备),可切换至 Bl ...