vue里computed的get和set
computed里的对象有get和set方法。
get是当该对象所依赖的变量发生变化是执行,重新returncomputed结果。
set是该对象的值变化时会执行,并且将变化的结果作为参数传进set里。然后可以根据传进的值来处理
<div id="app">
<p>price: <input type="text" v-model='price'>{{price}}</p>
<p>mount: <input type="text" v-model='mount'></p>
<p>toltal: {{calculate}} </p>
<button v-on:click='change'>changePrice</button>//当改变了calculate的值得时候,会执行calculate的set方法,且传入参数 </div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
price: 0,
mount: 0, },
methods:{
change:function(){
this.calculate = 100;
} },
computed:{
calculate:{//这个calculate不能是函数而是对象了。
get: function(){
alert('get执行了')//页面渲染时会执行一次get来获取calculate的值
return this.price * this.mount
},
set:function(value){
alert('set执行了');
this.price = 10;
this.mount = 10
}
}
}
})
vue里computed的get和set的更多相关文章
- vue里的渲染以及computed的好处
如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...
- vue里的数据
背景: 一个项目完工在即,鉴于此,前端使用了vue,写下此栏,以供日后翻阅, 会涉及到我所运用到的vue相关知识,需要一定的js基础. 默认vue的single-file-components(单文件 ...
- vue中computed(计算属性)和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
- Vue中computed与method的区别
转载于:https://segmentfault.com/a/1190000014478664?utm_source=tag-newest 1.computed区别于method的两个核心 在官方文档 ...
- 深入解析Vue里函数的调用顺序介绍
今天为大家分享一篇对vue里函数的调用顺序介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. method用来定义方法的,比如你@click=& ...
- 了解vue里的Runtime Only和Runtime+Compiler
转自:了解vue里的Runtime Only和Runtime+Compiler 扩展文章:Vue 2.0如何仅使用Runtime-only Build构建项目? 可以看到有两种版本: Runtime ...
- vue里在自定义的组件上定义的事件
事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...
- vue的computed属性
vue的computed属性要注意的两个地方,1,必须有return,2,使用属性不用括号 <div> <input type="text" v-model=&q ...
- Vue的Computed的使用
Vue的Computed的使用 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- Golang LicenseServer授权服务器的设计 与 RSA 密钥对的应用
//TODO 待写文章 目录: 1.为什么要写授权服务器 LicenseServer 2.授权服务器的设计思路 3.授权服务器所使用到的加密技术 1.为什么要写授权服务器 为了防止别人拿到二进制后, ...
- 开启win10下Ubuntu子系统的SSH服务 并设置为开机启动
Win10中安装Ubuntu子系统后默认是没有开启SSH服务的,需要手动配置开启, 1.先通过 bash 进入子系统修改配置 vi /etc/ssh/sshd_config 备注 输入i 表示键入, ...
- Nginx 反向代理504 Gateway Time-out
location /ssfwpt { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_ ...
- 分析技术和方法论营销理论知识框架,营销方面4P、用户使用行为、STP,管理方面5W2H、逻辑树、金字塔、生命周期
原文:五种分析框架:PEST.5W2H.逻辑树.4P.用户使用行为 最近在一点点的啃<谁说菜鸟不懂得数据分析>,相当慢,相当的费脑力,总之,真正的学习伴随着痛苦:) 最初拿到这本书的时候, ...
- Spark 官方博文专区(目录)
关于转载一些 Spark 官方的文档以及 DataBricks 公司博文,本系列基本是中英双语,主要是为了提高自己的英语水平. 文章分类 spark databricks A Tale of Thre ...
- Delphi 如何操作Excel
摘自:http://wenjieshiyu.blog.163.com/blog/static/10739413201072033115869/ 个人收藏:Delphi 控制Excel(一) 使用动态 ...
- android sdk content loader 0%不动
Make sure that eclipse is not active. If it is active kill eclipse from the processes tab of the tas ...
- ASP.NET MVC 右键点击添加没有区域(Area)、控制器、试图等选项
在MVC项目中准备添加控制器.区域时发现没有控制器这个选项,当时没有在意以为VS出问题了,网上所搜了一下,有人说没有安装:Microsoft.AspNet.Mvc或者需要升级. 本次的解决如下: 1) ...
- Linux系统盘扩容-物理机非虚拟机
# Linux系统盘扩容 ## 了解磁盘分区情况 - `blkid` 查看分区情况- `fdisk -l` 分区表 ## 系统挂载分区 - `/etc/fstab` 启动挂载分区情况 ## 双系统下分 ...
- nginx转发成功报400 bad request,服务端未收到请求
nginx转发成功报400 bad request,服务端未收到请求 解决办法: upstream后面不要跟下划线 例如: upstream auth_service{ server 30.4.164 ...