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 ...
随机推荐
- HRMS(人力资源管理系统)-从单机应用到SaaS应用-架构分析(功能性、非功能性、关键约束)-下篇
一.开篇 上一篇<HRMS(人力资源管理系统)-从单机应用到SaaS应用-架构分析(功能性.非功能性.关键约束)-上篇>我们详细分析了在架构分析过程中我们需要注意的内容,架构过程的方法论及 ...
- [jvm][面试]JVM 调优总结
https://blog.csdn.net/wfh6732/article/details/57422967 堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-b ...
- 【MySQL】MySQL中查询出数据表中存在重复的值list
1.目的:查询MySQL数据表中,重复记录的值 2.示例: 3.代码: select serial_num,count(*) as count FROM card_ticket GROUP BY se ...
- 单片机成长之路(51基础篇) - 004 STC89C52MCU 软件实现系统复位
用户应用程序在运行过程中,有时会有特殊需求,需要实现单片机系统复位(热启动之一),传统的8051单片机由于硬件上未支持此功能,用户必须用软件模拟实现,实现起来较麻烦.STC单片机增加了相应的硬件功能, ...
- H+ 关闭menuTab页面
//注:在contabs.js文件中 $(function () { }); 方法外 加入//注: data-name="' + menuName + '" 这句是加入的自定义属性 ...
- mongodb 复杂查询之 本表 join
mongdb 的数据介绍: 系统有多个用户,contractId 代表用户Id,其中 serialno 也是一种 id,代表该客户登录系统的编号,该 contractId 每次登录系统都会产生不同 ...
- CentOS 安装 Redis 5
https://redis.io/download下载最新stable版,当前最新版为redis-5.0.3.tar.gz cd /usr/local/src && wget http ...
- SNF软件开发机器人-子系统-功能-启用大按钮样式如何配置
启用大按钮 当启用大按钮被选中后,页面的按钮图表将以按钮配置中的大按钮样式显示. 1.效果展示: 2.使用说明: 打开显示页面,点击开发者选项的简单配置按钮.在功能表信息中选择启用大按钮复选框后保存.
- tf训练OTSU
训练一个简单的回归网络 基础的函数如下: # coding=utf-8 import tensorflow as tf import numpy as np np.random.seed(0) # 卷 ...
- 【iCore1S 双核心板_ARM】例程十八:SD_IAP_FPGA实验——更新升级FPGA
实验现象及操作说明: 1.烧写程序成功,绿色ARM·LED灯点亮,三色FPGA·LED灯循环点亮,烧写失败,如果挂载SD卡失败,红灯快闪,如果打开文件失败,蓝灯快闪,读取文件指针移动失败,白灯点亮,升 ...