好家伙，

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. 【图解源码】Zookeeper3.7源码分析，包含服务启动流程源码、网络通信源码、RequestProcessor处理请求源码

    Zookeeper3.7源码剖析 能力目标 能基于Maven导入最新版Zookeeper源码 能说出Zookeeper单机启动流程 理解Zookeeper默认通信中4个线程的作用 掌握Zookeepe ...

  2. Java实用类(五) -Math类和指定范围的随机数

    1.Math类 java.lang.Math类提供了常用的数学运算方法和两个静态常量E(自然对数的底数) 和PI(圆周率) // 绝对值 System.out.println(Math.abs(-3. ...

  3. 在VMware Workstation 16上安装Windows7虚拟机以及VMware tools安装失败解决方法

    安装VMware Workstation 16 搜素"VMware Workstation下载" 下载 VMware Workstation Pro 下载Windows7系统镜像 ...

  4. UiPath录制器的介绍和使用

    一.录制器(Recording)的介绍 录制器是UiPath Studio的重要组成部分,可以帮助您在自动化业务流程时节省大量时间.此功能使您可以轻松地在屏幕上捕获用户的动作并将其转换为序列. 二.录 ...

  5. 比我的脸还干的gan货——Python Flask Web 框架入门

    Flask是一个轻量级的基于Python的web框架. 本文适合有一定HTML.Python.网络基础的同学阅读. 1. 简介 这份文档中的代码使用 Python 3 运行.是的,所以读者需要自己在电 ...

  6. LeetCode. 812. 最大三角形面积

    812. 最大三角形面积 鞋带公式 鞋带公式,用于计算任意多边形的面积,可用于计算三角形的面积 已知 ΔABC 三个顶点的坐标 A:(x1,y1). B:(x2,y2). C:(x3,y3) 对应的矩 ...

  7. Linux for CentOS 下的 nginx 绿色安装-超省心安装

    1.我这里是nginx-1.13.0-1.x86_64 .rpm(点击下载)版本的. 2.安装nginx的相应环境.有些环境可能不必须,但是安装了,确保以防万一,多多益善 yum install gd ...

  8. react配置postcss-pxtorem适配

    适配移动端操作如下: 安装 postcss-pxtorem .amfe-flexible npm i postcss-pxtorem npm i amfe-flexible amfe-flexible ...

  9. 常用API（Java）

    常用API Object toString方法 场景:当我们使用toString方法想要输出对象变量时,官方提供的toString方法会直接输出对象所在的地址,而不是我们想要的对象变量,所以我们要把t ...

  10. 牛客SQL刷题第一趴——非技术入门基础篇

    user_profile表: id device_id gender age university province 1 2138 male 21 北京大学 Beijing 2 3214 male   ...