观察属性$watch
<!DOCTYPE html>
<html lang="zh"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="../css/style.css" rel="stylesheet"> </head> <body>
<div id="myApp">
<p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p>
<button @click="btnClick(10000)">加价10000円</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
price: 0,
priceInTax: 0,
priceChinaRMB: 0,
},
watch: {
price: function(newVal, oldVal){
console.log(newVal, oldVal);
this.priceInTax = Math.round(this.price * 1.08);
this.priceChinaRMB = Math.round(this.priceInTax / 16.75);
},
},
methods: {
btnClick: function(newPrice){
this.price += newPrice;
},
},
});
myApp.price = 29980;
</script>
</body> </html>
观察属性$watch的更多相关文章
- kotlin标准委托之可观察属性
所谓可观察属性就是当属性变化时可以拦截其变化,实现观察属性值变化的委托函数是Delegates.observable.该函数接受二个参数,第一个是初始化值,第2个属性值变化事件的响应器.每次我们向属性 ...
- Swift学习笔记十：属性
1.存储属性 1. 作为特定类或结构实例的一部分,存储属性存储着常量或者变量的值. 存储属性可分为变量存储属性(keywordvar描写叙述)和常量存储属性(keywordlet描写叙述) ...
- 科学计算三维可视化---TVTK管线与数据加载（用IVTK根据观察管线）
一:用IVTK根据观察管线 (一)引入该工具 from tvtk.tools import ivtk 可能需要安装pygments pip3 install pygments (二)使用ivtk显示立 ...
- CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果
CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...
- 设计模式(七): 通过转接头来观察"适配器模式"(Adapter Pattern)
在前面一篇博客中介绍了“命令模式”(Command Pattern),今天博客的主题是“适配器模式”(Adapter Pattern).适配器模式用处还是比较多的,如果你对“适配器模式”理解呢,那么自 ...
- IL接口和类的属性
上一篇文章学习了IL的入门,接下来我们再通过两个例子来了解下类的属性.构造函数以及接口的使用 一.类的属性.构造函数 1.先看下我们要构建的类的C#代码,然后再进行IL的实现,示例代码如下: [Ser ...
- java web学习总结(二十六) -------------------JSP属性范围
所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...
- SAP CRM 通过调试观察CL_CRM_BOL_ENTITY中的数据
这个(BOL里面)最重要的类值得一看. BOL中的每条记录都会在CL_CRM_BOL_ENTIT中表示.至今,我们已经写过一些事件处理器,并且我们已经直接或间接的通过这个类工作.在业务场景中,我们也许 ...
- 实时观察Apache访问情况的工具Apachetop
Linux服务器的负载.进程等信息可以通过top命令查看.而Apache的运转如何实时的观察呢?“tail -f”log文件?这是个好方法,但是太累了! 所以,感谢Chris Elsworth为我们提 ...
随机推荐
- USACO2012 Broken necklace /// DP oj10103
题目大意: 项链最长的纯色连续段,“w”即white白色珠子,可任意涂为红或蓝,“r” “b”即红 蓝. Input Line 1: N, the number of beads Line 2: ...
- 【POJ】3278 Catch That Cow
题目链接:http://poj.org/problem?id=3278 题意:有一头奶牛跑到了K的位置,农夫在N的位置,求最短抓到奶牛的时间. 农夫有两种移动方式. 1.步行:一分钟内从x->x ...
- 城市代码表mysql
只有代码: # ************************************************************ # Sequel Pro SQL dump # Version ...
- idea引入项目下所有文件（ps：包括静态文件夹）
打开项目的目录结构 点击finish 最后删除目录下多余的src就可以了
- Eclipse指定JDK版本
Eclipse有好多版本,同时又分32位和64位,要使用相对应的版本和一样位数的JDK,Eclipse才能正常运行. 对应不上时,Eclipse 甚至不能正常启动.报错:“Failed to load ...
- 【JZOJ1667】【BZOJ1801】【luoguP2051】中国象棋
description 在N行M列的棋盘上,放若干个炮可以是0个,使得没有任何一个炮可以攻击另一个炮.请问有多少种放置方法?中国象棋中炮的行走方式大家应该很清楚吧. analysis \(DP\),容 ...
- PHP缓存技术的应用1
// 自定义缓存类 class Cache_Filesystem { // 缓存写保存 function set ($key, $data, $ttl) { //打开文件为读/写模式 $h = fop ...
- （转）Android中RelativeLayout各个属性的含义
转:http://blog.csdn.net/softkexin/article/details/5933589 android:layout_above="@id/xxx" - ...
- 没有找到mfc100.dll
转自VC错误:http://www.vcerror.com/?p=86 问题描述: 生成的exe文件在编译的时候会提示"没有找到mfc100.dll",这个时候需要更改配置为静态编 ...
- (37)C#Linq
https://docs.microsoft.com/zh-cn/dotnet/csharp/language-reference/keywords/let-clause 一.定义 Linq(Lang ...