第六十七篇：Vue的计算属性
好家伙，
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的计算属性的更多相关文章
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- vue的计算属性
在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- vue中计算属性的get与set方法
计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...
- Vue.js 计算属性
Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- Vue之计算属性
上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...
随机推荐
- 分享一个网上搜不到的「Redis」实现「聊天回合制」的方案
前言 为什么说网上搜不到,因为关于聊天回合制的方案作者本人快把百度搜秃噜了也没找到,好在最终是公司一个关系不错的大佬帮提供了点思路,最终作者将其完整实现了出来. 分享出来大家可以收藏,万一你哪天也碰到 ...
- 重学ES系列之变量的作用范围
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- OpenSSF安全计划：SBOM将驱动软件供应链安全
在 软件成分分析(SCA)一文中,我们简单提到软件物料清单(SBOM)在安全实践中的价值. 本期文章将带你深入了解 "SBOM 无处不在"计划是什么,以及 SBOM 对未来软件供应 ...
- 【python基础】第09回 数据类型内置方法 01
本章内容概要 1.数据类型的内置方法简介 2.整型相关方法 3.浮点型相关方法 4.字符串相关方法 5.列表相关方法 本章内容详情 1.数据类型的内置方法简介 数据类型是用来记录事物状态的,而事物的状 ...
- React key究竟有什么作用？深入源码不背概念，五个问题刷新你对于key的认知
壹 ❀ 引 我在[react]什么是fiber?fiber解决了什么问题?从源码角度深入了解fiber运行机制与diff执行一文中介绍了react对于fiber处理的协调与提交两个阶段,而在介绍协调时 ...
- 10道不得不会的JavaEE面试题
10道不得不会的 JavaEE 面试题 我是 JavaPub,专注于面试.副业,技术人的成长记录. 以下是 JavaEE 面试题,相信大家都会有种及眼熟又陌生的感觉.看过可能在短暂的面试后又马上忘记了 ...
- EEPROM存储电路（M24C64芯片）
电可擦写可编程只读存储器(Electrically Erasable Programmable Read-only Memory, EEPROM)实现掉电情况下保存数据,设计温湿度变送器采用M24C6 ...
- Nginx越界读取缓存漏洞 CVE-2017-7529
1.漏洞描述 Nginx在反向代理站点的时候,通常会将一些文件进行缓存,特别是静态文件.缓存的部分存储在文件中,每个缓存文件包括"文件头"+"HTTP返回包头" ...
- 集合-新特性foreach循环遍历集合或项目
1.增强for循环对集合的遍历 点击查看代码 @Test //集合遍历 public void test3(){ Collection coll = new ArrayList(); coll.add ...
- Eclipse Ctrl+鼠标左键不能查看源代码
查询当前项目的使用的java包版本. 找到java包相应版本的安装路径. 在 "Source Attachment"对话框下,选择"External location&q ...