好家伙，

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. Django从数据库导model迁移乱码

    python manage.py inspectdb > [your app name]\models.py 执行后 model.py乱码,将models.py以 UTF-16LE打开.

  2. Java集合框架(一)-ArrayList

    大佬理解->Java集合之ArrayList 1.ArrayList的特点 存放的元素有序 元素不唯一(可以重复) 随机访问快 插入删除元素慢 非线程安全 2.底层实现 底层初始化,使用一个Ob ...

  3. 智慧机房3D可视化技术解决方案

    随着夏季气温越来越高,机房内大量设备同步工作时,难免使机房内温度飙升. 机房温度每升高10℃,计算机的可靠性就下降25% 磁盘磁带也会因热涨效应造成记录错误 计算机的时钟主频在温度过高都会降低 UPS ...

  4. Windows下maven配置环境变量

    右键 "计算机",选择 "属性",之后点击 "高级系统设置",点击"环境变量",来设置环境变量,有以下系统变量需要配置: ...

  5. vue this.getOptions is not a function

    错误提示截图: 问题原因:是由于sass-loader引用的版本过低导致 解决方法:在package.json中增加以下配置后 "sass-loader": "^10&q ...

  6. MIT 6.824 Lab2A Raft之领导者选举

    实验准备 实验代码:git://g.csail.mit.edu/6.824-golabs-2021/src/raft 如何测试:go test -run 2A -race 相关论文:Raft Exte ...

  7. Chrome实现自动化测试：录制回放网页动作

    Chrome 浏览器是真的恐怖,它会把相关的小工具都卷死.从它诞生至今,创造了一个又一个的传奇,现在可以看到基于它的操作系统 chrome os ,还能买到用它做系统的笔记本电脑. 最近,新版本支持录 ...

  8. CA证书、自颁发证书、自签名证书联系

    一.理论基础 ssl:secure socket layer(安全套接层协议)的缩写,通过此协议可以保证两个应用通信的可靠性和保密性.openssl:是ssl协议的实现.提供了对称加密算法.非对称加密 ...

  9. CF665B Shopping

    CF665B Shopping 题目描述 Ayush is a cashier at the shopping center. Recently his department has started ...

  10. 笔记本Usb接口案例

    笔记本电脑通常具备使用USB设备的功能.在生产的时候,笔记本都预留了可以插入USB设备的USB接口.但具体是什么USB设备,笔记本厂商并不关心,只要符合USB规格的设备都可以. 定义USB接口,具备最 ...