好家伙，

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. 想学嵌入式？要不一起玩 Arduino 吧

    作者:HelloGitHub-Anthony 这里是 HelloGitHub 推出的<讲解开源项目>系列,本期介绍的是如何用开源硬件开发平台 Arduino,自己动手做一个温湿度显示器. ...

  2. 1.3 操作系统的第三个功能——存储管理功能 -《zobolの操作系统学习札记》

    1.3 操作系统的第三个功能--存储管理功能 作者zobol:关于操作系统概论-存储管理功能,我给出下列问题: 目录 1.3 操作系统的第三个功能--存储管理功能 问1:操作系统的文件管理系统主要是负 ...

  3. 使用阿里云RDS for SQL Server性能洞察优化数据库负载-初识性能洞察

    简介 数据库性能调优通常需要较高数据库水平,并伴随较多的前期准备工作,比如收集各种性能基线.不同种类的性能指标.慢SQL日志等,这通常费时费力且效果一般,当面对多个数据库时总体拥有成本会大幅增加.今天 ...

  4. mysql-安装(windows版本)与登录

    安装mysql 1.MySQL版本 mysql-5.6.35-winx64.zip 2.首先解压到安装目录 3.修改配置文件 复制my-default.ini 重命名为my.ini 然后修改mysql ...

  5. 基于.NetCore开发博客项目 StarBlog - (13) 加入友情链接功能

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  6. C# Winform程序界面优化实例

    进入移动互联网时代以来,Windows桌面开发已经很久不碰了.之前就是从做Windows开发入行的. 当年,还是C++ VC6, MFC的时代.那时候开发要查的是MSDN :-).内存要自己管理, 排 ...

  7. C++ 练气期之二维数组与矩阵运算

    1. 前言 C++中的一维数组可以存储线性结构的数据,二维数组可以存储平面结构的数据.如班上所有学生的各科目成绩就有二个维度,学生姓名维度和科目成绩维度. 这样的表格数据可以使用二维数组进行存储. 当 ...

  8. SpringBoot自定义starter开发分布式任务调度实践

    概述 需求 在前面的博客<Java定时器演进过程和生产级分布式任务调度ElasticJob代码实战>中,我们已经熟悉ElasticJob分布式任务的应用,其核心实现为elasticjob- ...

  9. C#《原CSharp》第三回 万文疑谋生思绪 璃月港口见清玉

    第三回 万文疑谋生思绪 璃月港口见清玉 ===================================================================== 云溪愣了下,在他的认 ...

  10. Active Backup for Business激活

    依次执行 https://IP地址:5001/webapi/auth.cgi?api=SYNO.API.Auth&method=Login&version=1&account= ...