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

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

<!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. MySQL学习笔记-函数

    MySQL-常用函数 select {函数}({参数}); select是查询用的,用来展示函数返回值. 一. 字符串函数 常用的字符串函数: 1. concat 拼接 select concat(' ...

  2. 原来Stable Diffusion是这样工作的

    stable diffusion是一种潜在扩散模型,可以从文本生成人工智能图像.为什么叫做潜在扩散模型呢?这是因为与在高维图像空间中操作不同,它首先将图像压缩到潜在空间中,然后再进行操作. 在这篇文章 ...

  3. 解决Python使用GPU

    在Python中使用GPU进行计算通常涉及到一些特定的库,如NumPy.SciPy的GPU加速版本(如CuPy.PyCUDA等)或深度学习库(如TensorFlow.PyTorch等).这些库能够利用 ...

  4. 【大道至简】NetCore3.1快速开发框架一：介绍

    新的一年开始,祝大家2020新年快乐! 去年开源了一个基于NetCore2.2的框架,好多好基友还是比较喜欢的 github地址:https://github.com/feiyit/FytSoaCms ...

  5. webpack-bundle-analyzer 分析打包模块大小优化

    安装 webpack-bundle-analyzer npm i webpack-bundle-analyzer -D 配置vue.config.js module.exports = defineC ...

  6. boltdb 原理

    简介 介绍及简单使用:https://www.cnblogs.com/daemon365/p/17690167.html 源码地址:https://github.com/etcd-io/bbolt p ...

  7. 通俗理解GAN -- 基础认知

    Smiling & Weeping ---- 你已春风摇曳,我仍一身旧雪 1.GAN的基本思想 GAN全称对抗生成网络,顾名思义是生成模型的一种,而他的训练则是一种对抗博弈状态中的.下面我们举 ...

  8. 如何更改.NET中的默认时区？

    除了"在操作系统中修改时区信息,然后重启.NET应用程序,使其生效"之外.如何在不修改操作系统时区的前提下,修改.NET中的默认时区呢? 这是一位 同学兼同事 于5月21日在技术群 ...

  9. 开源一个反sql注入的asp.net core中间件

    现在公安有一个专门负责信息安全的部门,前几天公司就收到了一个整改通知,防sql注入的整改. 我们公司开始对网站进行了简单的测试,普通的sql都能检测出来. 但还是被发了整改通知,肯定有些sql注入的方 ...

  10. Jenkins项目构建成功后，配置邮件

    6.1 配置信息 6.1.1 发给多个收件人 邮件要发送给多个人,要使用[,]分割 6.1.2. 项目构建引用Editable Email Notification,设置tigger 在项目构建后,引 ...