【Vue2】Computed 计算属性
计算属性在编写的时候是一个方法
但是在调用的时候作为属性使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
<script src="./../lib/jquery-3.6.0.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.6.0/dayjs.min.js"></script>
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<div>
RGB-R: <input type="text" v-model.number="rgb_R"> <br>
RGB-G: <input type="text" v-model.number="rgb_G"> <br>
RGB-B: <input type="text" v-model.number="rgb_B"> <br>
</div>
<hr>
<!-- 组件绑定的时候，注意是属性！，不是方法，不要加括号 -->
<div class="box" :style="returnRGB">
<span>rgb({{`${rgb_R}, ${rgb_G}, ${rgb_B}`}})</span>
<!-- <span>{{this}}</span> -->
</div>
</div> <script>
const VIEW_MODEL1 = new Vue({
el: '#app',
data: {
rgb_R: 99,
rgb_G: 220,
rgb_B: 99,
},
// 注意，计算属性，里面的方法名称，最后提供给组件的是一个变量属性
// 计算属性的依赖源发生变化，属性将会重新计算
computed: {
returnRGB() {
return {
background: `rgb(${this.rgb_R}, ${this.rgb_G}, ${this.rgb_B})`
}
}
}
})
</script>
</body>
</html>
如果属性需要传递参数，需要return一个闭包的处理
https://blog.csdn.net/acoolgiser/article/details/89056072
【Vue2】Computed 计算属性的更多相关文章
- vue computed计算属性和watch监听属性解疑答惑
computed计算属性 计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...
- Vue之computed计算属性
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...
- Vue（七）：computed计算属性
简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...
- Vue的computed计算属性是如何实现的
一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- computed 计算属性
wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=wepy%e9%a1%b9%e7%9b%ae%e7%9a%8 ...
- vue computed计算属性 watch监听
计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...
- vue-methods方法与computed计算属性的差别
好吧,我就是单纯的举个例子:实现显示变量 message 的翻转字符串 第一种:methods:我们可以通过在表达式中调用方法来达到同样的效果: 第二种:computed:计算属性 上面的2中方法都实 ...
- Vue学习笔记【31】——Vue路由（computed计算属性的使用）
computed计算属性的使用 默认只有getter的计算属性: <div id="app"> <input type="text" ...
随机推荐
- MyBatis实现MySQL表字段及结构的自动增删
前言 在开发过程中,总会涉及到数据库表结构字段的增加或者删除,或者是索引的增加和减少,这个时候能把修改表结构字段这些工作都交给程序来进行,那能大大方便开发.正好有一个现成的工具可以在springboo ...
- 微信小程序设置swiper圆角在ios上失效
今天在给轮播图添加圆角的时候,发现在安卓机上是有圆角的,但是在苹果手机上圆角却失效了,后来翻阅了文档发现这是个官方的bug 解决方法1 border-radius: 20rpx; /*再设置个tran ...
- item2 报错 a session ended very soon after starting. check that the command in profile default
周末修改了阿里云 ecs 实例密码,再次用item2 远程连接服务器时,报一下的错误: 原因 每次使用ssh 远程新的连接,都会在 ~/.ssh/known_hosts 文件上生成 ssh 秘钥对,更 ...
- C#.NET ASP.NET IIS 加载.pfx私钥证书时报错“出现了内部错误。”
C#.NET ASP.NET IIS 加载.pfx私钥证书时报错"出现了内部错误." 原始代码报错: X509Certificate2 x509cer = new X509Cert ...
- .net core .net5 asp.net core mvc 与quartz.net 3.3.3 新版本调用方式
参照了:https://www.cnblogs.com/LaoPaoEr/p/15129899.html 1.项目Nuget引用Quartz.AspNetCore和Quartz.Extensions. ...
- 动态生成的 select option 无法选中，设置值
使用jQuery的 .val('22') 给select 设置值时不生效. 原因:select是动态生成的,在DOM还没生成完之前就调用了.val('22'). 解决方法:动态生成的ajax请求改成同 ...
- 开箱即用的Live2d
安装 npm i @tomiaa/live2d 代码 <template> <div ref="live2dContentRef" id="live2d ...
- Masonry在视图相对关系处理中的各种“offset”
如果我们需要设置一个view在另一个view的右边缘距离一定距离的地方,利用Masonry这么写: [a mas_makeConstraints:^(MASConstraintMaker *make) ...
- 基于 Linux 2.6的 硬中断 / 软中断的原理以及实现
Author:zhangskd @ csdn blog 概述 从本质上来讲,中断是一种电信号,当设备有某种事件发生时,它就会产生中断,通过总线把电信号发送给中断控制器. 如果中断的线是激活的,中断控制 ...
- Java(screw)生成数据库表结构
数据库支持 MySQL MariaDB TIDB Oracle SqlServer PostgreSQL Cache DB(2016) 文档生成支持 html word markdown 方式一:代码 ...