vue的计算属性get和set
1.计算属性是用来存储数据,但具有以下几个特点:
a.数据可以进行逻辑处理操作。
b.对计算属性中的数据进行监视。
2.计算属性和普通属性的区别:
a.计算属性是基于它的依赖进行更新的,只有在相关依赖发生改变时才能更新变化
b.计算属性是缓存的,只要相关依赖没有改变,多次访问计算属性得到的值是之前缓存计算的结果,不会多次执行。
3.get和set
计算属性由两部分组成,get和set,分别用来获取计算属性和设置计算属性。
默认只有get,如果需要set,要自己添加
<script type="text/javascript">
window.onload=function(){
let vm = new Vue({
el:"#app",
data:{
num:8
},
computed:{
num1:{
get:function(){//必须有返回值,用来获取属性,称为get函数
return this.num-1;
},
set:function(val){
console.log('修改num1的值');
this.num = 11;
}
}
},
methods:{
changeNum1:function(){
this.num1 = 11;
}
}
})
}
</script>
html:
<div id="app">
<p>{{ num }}</p>
<p>{{ num1 }}</p>
<button @click='changeNum1'>点击改变num1的值</button>
</div>
vue的计算属性get和set的更多相关文章
- 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 ...
- Vue.js 计算属性的秘密
计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...
随机推荐
- 自学python 第三天
#!/usr/bin/env python# -*- coding:utf-8 -*- # name = "***"# if "*" in name:# pri ...
- luogu P4726 多项式指数函数(模板题FFT、多项式求逆、多项式对数函数)
手动博客搬家: 本文发表于20181127 08:39:42, 原地址https://blog.csdn.net/suncongbo/article/details/84559818 题目链接: ht ...
- [bzoj4027][HEOI2015]兔子与樱花_贪心_树形dp
兔子与樱花 bzoj-4027 HEOI-2015 题目大意:每个点有c[i]朵樱花,有一个称重m, son[i]+c[i]<=m.如果删除一个节点,这个节点的樱花或移动到它的祖先中深度最大的, ...
- [bzoj1055][HAOI2008]玩具取名_区间dp
玩具取名 bzoj-1055 HAOI-2008 题目大意:给你一个用W,I,N,G组成的字符串,给你一些这四个字符之间的变换规则,每一个变换规则都是由一个字符变成两个字符,问这个字符串是否可能是由一 ...
- 圆角矩形“RoundRectShape”使用详解
圆角矩形 常用作一些组件的背景 构造函数: RoundRectShape(float[] outerRadii, RectF inset, float[] innerRadii) Specifies ...
- python 读取二进制文件 转为16进制输出
示例: #!/usr/bin/env python #encoding: utf-8 import binascii fh = open(r'C:\Temp\img\2012517165556.png ...
- Powershell 渗透测试工具-Nishang
Powershell 渗透测试工具-Nishang 分享到: 作者:V1ct0r 稿费:500RMB(不服你也来投稿啊!) 投稿方式:发送邮件至linwei#360.cn,或登陆网页版在线投稿 传送门 ...
- Triangle LOVE(拓扑排序)
Triangle LOVE Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/65536K (Java/Other) Total ...
- VM-安装MAC系统
搜了下论坛没有这个教程,继续搬运一波,这次教的是用VM15安装Mac OS10.14懒人版VMware安装Windows和Linux比较类似,相对于今天要安装的MAC OS来说过程也比较简单.官方原版 ...
- Spring《八》AOP/代理类定义
Spring通知 Interception Around通知 MethodInterceptor类(方法执行前后通知) Before通知 MethodBeforeAdvice类(方法执行前通知) Af ...