好家伙,

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. flink窗口分类

    窗口分类 按照驱动类型分类 窗口本身是截取有界数据的一种方式,所以窗口一个非常重要的信息就是"怎样截取数据".换句话说,就是以什么标准来开发和结束数据的截取. 按照驱动类型分类主要 ...

  2. 一款超级好用的3Dmax模型插件 支持模型多格式批量转换

    对于模型设计师来说模型格式转换是最常见的事,但是每一款建模软件所支持的格式各有不同,模型互导操作太麻烦 为了解决这个难题,老子云平台研发了一款基于3dmax软件的模型格式转换插件,支持多种模型格式想换 ...

  3. Stream常用操作以及原理探索

    Stream常用操作以及原理 Stream是什么? Stream是一个高级迭代器,它不是数据结构,不能存储数据.它可以用来实现内部迭代,内部迭代相比平常的外部迭代,它可以实现并行求值(高效,外部迭代要 ...

  4. 简单实现python接口自动化(一)

    目的:excel中维护接口用例数据,通过python中requests库进行读取用例,并把运行结果与excel中的预期结果对比,最后把执行情况写入到excel中去. excel维护数据: 具体的接口名 ...

  5. Centos8安装NextCloud记录

    今天在网上学习了这个Nextcloud 网盘的搭建,被折磨的快崩溃了.始终是找不到答案,我在网上查了2天的资料 还是没有找到答案,今天这里总结一下安装的下面的总结: 原文出处在官网:CentOS 8 ...

  6. 10道不得不会的JavaEE面试题

    10道不得不会的 JavaEE 面试题 我是 JavaPub,专注于面试.副业,技术人的成长记录. 以下是 JavaEE 面试题,相信大家都会有种及眼熟又陌生的感觉.看过可能在短暂的面试后又马上忘记了 ...

  7. 广东省30m二级分类土地利用数据(矢量)

    数据下载链接:百度云下载链接​ 广东省,地处中国大陆最南部,属于东亚季风区,从北向南分别为中亚热带.南亚热带和热带气候,是中国光.热和水资源最丰富的地区之一.主要河系为珠江的西江.东江.北江和三角洲水 ...

  8. LM431精密+3.3V产生电路

    精密+3.3V电压通过三段可调并联稳压器LM431电路产生.LM431稳压电路如下图所示. 输出电压 UO仅与电阻 R35.R38 有关,计算公式如下: 式中常数2.5为内部基准电压,其保持恒定不变. ...

  9. JDK9对集合添加的优化of方法和Debug追踪

    JDK9对集合添加的优化(of方法) JDK9的新特性: 1.List接口,Set接口,Map接口:里边增加了一个静态的方法of,可以给集合一次性添加多个元素 2.static List of (E- ...

  10. Josephus问题(Ⅲ)

    题目描述 n个人排成一圈,按顺时针方向依次编号1,2,3-n.从编号为1的人开始顺时针"一二三...."报数,报到m的人退出圈子.这样不断循环下去,圈子里的人将不断减少.最终一定会 ...