好家伙，

1.什么是计算属性？

首先它是一种属性，其次他有计算这个特殊的性质，

它是一个依赖于其他属性的属性，当依赖的属性发生变化的时候就会触发我们计算属性的逻辑

它会对这个属性进行计算，

所以说它是能够在里面写一些计算逻辑的属性，

所以它叫计算属性（好绕）

2.为什么是计算属性？

在模板中放入太多的逻辑会让模板过重且难以维护。

使用计算属性可以进行代码复用，

从而可以达到“逻辑复用”的效果

特点：

1．定义的时候，要被定义为“方法”

2．在使用计算属性的时候，当普通的属性使用即可

好处：

1．实现了代码的复用

2．只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！

3.举个例子:

举个例子,做一个可以控制颜色的框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="">

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

    <title>Great</title>

    <style>

        .box{

            width: 200px;

            height: 200px;

            border: 1px solid #ccc;

        }

    </style>

</head>

<body>

    <div id="app">

       <div>

           <span>R:</span>

           <input type="text" v-model="r">

        </div>

        <div>

            <span>G:</span>

            <input type="text" v-model="g">

         </div>

         <div>

            <span>B:</span>

            <input type="text" v-model="b">

         </div>

        <div class="box" :style="{ backgroundColer:`rgb(${r},${g},${b})`}">

             {{ `rgb(${r},${g},${b})`  }}

        </div>

        <button @click="show">确定</button>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>

        const vm = new Vue({

            el:'#app',

            data:{

                r:0,

                g:0,

                b:0,

            },

            methods:{

                show(){

                    console.log(`rgb(${this.r},${this.g},${this.b})`)

             },

            computed:{

                //rgb作为一个计算属性别定义为方法格式

                //最终,在这个方法中,要返回一个生成好的rgb(x,x,x)的字符串

              //rgb(){

              //      return `rgb(${this.r},${this.g},${this.b})`

              //  },

            }

        }

            });

            console.log(vm)

    </script>

</body>

</html>

效果如下:

在上述代码中,

`rgb(${this.r},${this.g},${this.b})`

这一属性反复出现

当我们需要对属性名进行修改或者进行值的更改时会变得非常麻烦

于是这里我们用到计算属性

methods:{

             show(){

                  console.log(rgb)

             },

            computed:{

                //rgb作为一个计算属性别定义为方法格式

                //最终,在这个方法中,要返回一个生成好的rgb(x,x,x)的字符串

              rgb(){

                    return `rgb(${this.r},${this.g},${this.b})`

                },

            }

        }

实现了

`rgb(${this.r},${this.g},${this.b})`

的复用,这个例子还行,体现了计算属性的价值,

(其实只有show方法那里能改)

That's all

第六十七篇：Vue的计算属性的更多相关文章

  1. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  2. Vue.js 计算属性是什么

    Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

  3. vue的计算属性

    在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...

  4. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

  5. 一起学Vue之计算属性和侦听器

    概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...

  6. vue中计算属性的get与set方法

    计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...

  7. Vue.js 计算属性

    Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...

  8. 浅谈Vue中计算属性（computed）和方法（methods）的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  9. Vue之计算属性

    上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...

随机推荐

  1. 【Github】 Github修改仓库的基本信息

    前言 我们通常在刚开始了解学习使用github时,一般都是测试的使用,有时我们向里面添加了一些代买,如果想要修改信息并且是删除仓库重新创建提交,可以采用下面方法修改仓库信息,名称.描述等. 修改仓库描 ...

  2. BUUCTF-隐藏的钥匙

    隐藏的钥匙 通过16进制打开发现flag,其中告知编码为base64,解密后加上flag{}即可 flag{377cbadda1eca2f2f73d36277781f00a}

  3. python实现人脸关键部位检测（附源码）

    人脸特征提取 本文主要使用dlib库中的人脸特征识别功能. dlib库使用68个特征点标注出人脸特征,通过对应序列的特征点,获得对应的脸部特征.下图展示了68个特征点.比如我们要提 取眼睛特征,获取3 ...

  4. 下载Chrome离线安装包

    https://www.google.com/chrome/thankyou.html?standalone=1&platform=mac&installdataindex=defau ...

  5. 线程池ThreadPoolExector核心ctl, execute, addWorker, reject源码分析

    线程池核心方法execute()解析: public void execute(Runnable command) {//#1 if (command == null) throw new NullP ...

  6. c# 添加指定扩展名的系统右键菜单(Windows11以前)

    在上篇文章c# 添加系统右键菜单(Windows11以前)中我们说了怎么在文件夹上增加一个菜单项,但是我们可能还需要给某个单独的扩展名添加右键菜单. 这里我们不用常见的扩展名来做,我们新做一个.jx的 ...

  7. IP核的使用（Vivado中的调用，product guide的查询阅读 ，引脚的设置（位宽，个数，算法等），coe文件的初始化 ）

    IP核:Intellectual Property core ,即知识产权核.每个IP核可以实现特定功能,我们在设计一个东西时可以直接调用某个IP核来辅助实现功能. 存在形式:HDL语言形式,网表形式 ...

  8. Mybatis源码解读-配置加载和Mapper的生成

    问题 Mybatis四大对象的创建顺序? Mybatis插件的执行顺序? 工程创建 环境:Mybatis(3.5.9) mybatis-demo,参考官方文档 简单示例 这里只放出main方法的示例, ...

  9. 常用的函数式接口_Predicate接口和常用的函数式借楼_Predicate_默认方法and

    package com.yang.Test.PredicateStudy; import java.util.function.Predicate; /** * java.util.function. ...

  10. @Convert 注解在jpa中进行查询的注意事项

    如果要实现实体类中属性的类型和数据库表中字段的类型相互转化,则需要使用 @Convert 注解 package javax.persistence; import java.lang.annotati ...