好家伙，

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. 4.怎么理解相互独立事件？真的是没有任何关系的事件吗？ 《zobol的考研概率论教程》

    1.从条件概率的定义来看独立事件的定义 2.从古典概率的定义来看独立事件的定义 3.P(A|B)和P(A)的关系是什么? 4.由P(AB)=P(A)P(B)推出"独立" 5.从韦恩 ...

  2. 【SpringBoot】YAML 配置文件

    博客主页:准Java全栈开发工程师 00年出生,即将进入职场闯荡,目标赚钱,可能会有人觉得我格局小.觉得俗,但不得不承认这个世界已经不再是以一条线来分割的平面,而是围绕财富旋转的球面,成为有钱人不是为 ...

  3. 『现学现忘』Git后悔药 — 28、版本回退git reset --soft命令说明

    git reset --soft commit-id命令:回退到指定版本.(soft:柔软的) 该命令仅仅修改分支中的HEAD指针的位置,不会改变工作区与暂存区中的文件的版本. 实现上是只做了一件事情 ...

  4. Qucs初步使用指南（不是multism）

    众所周知,Multism是一款强大的电路仿真软件,学习电子电路的同学都会接触到. 但是,这软件不支持Linux.(这就很魂淡了啊) 我的主力机是Linux,不能进行电路仿真成了学习的最大障碍. 使用w ...

  5. webapi <Message>已拒绝为此请求授权。</Message>

    webapi <Message>已拒绝为此请求授权.</Message> 原有的调用base.OnAuthorization(actionContext); 换成下面这个 // ...

  6. 常用的函数式接口_Predicate接口_默认方法and和Predicate接口练习_集合接口筛选

    默认方法:and 既然是条件判断,就会存在与.或.非三种常见的逻辑关系.其中将两个Preadicate条件使用"与"逻辑连接起来实现"并且"的效果时,可以使用d ...

  7. Centos7借助docker部署mysql,提供远程链接服务

    Centos7 借助docker部署mysql,并提供远程连接服务 安装docker 运行docker 注意安装docker和运行docker的步骤很简单,可以参考我学习docker的笔记 docke ...

  8. 意向不到的Dubug妙招

    1.直接dubug到想要到达的位置,直接点击旁边的数字即可. 2.debug后不想重新启动,想重新进入再执行一次debug,可以使用drop frame来删除当前栈,跳到之前的栈再一次进入这个栈. 注 ...

  9. 表单中设置了 `keyup.enter.native` 的按键事件，但是回车后没有执行查询，反而会刷新页面

    场景 添加属性对话框中,input输入后点击 enter,不会执行绑定的 handleDialogQuery 事件,反而会刷新整个页面: 如果不点击 enter,点击搜索按钮,则是正常的. 又测试:在 ...

  10. linux常用命令和快捷键收集

    find / -name php #查找根目录下所有包含 php 字符的文件和目录 find / -ctime 1 #查找最近一天下载的文件和目录 yum install lrzsz #安装上传下载组 ...