<!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的更多相关文章

  1. kotlin标准委托之可观察属性

    所谓可观察属性就是当属性变化时可以拦截其变化,实现观察属性值变化的委托函数是Delegates.observable.该函数接受二个参数,第一个是初始化值,第2个属性值变化事件的响应器.每次我们向属性 ...

  2. Swift学习笔记十：属性

    1.存储属性       1. 作为特定类或结构实例的一部分,存储属性存储着常量或者变量的值. 存储属性可分为变量存储属性(keywordvar描写叙述)和常量存储属性(keywordlet描写叙述) ...

  3. 科学计算三维可视化---TVTK管线与数据加载（用IVTK根据观察管线）

    一:用IVTK根据观察管线 (一)引入该工具 from tvtk.tools import ivtk 可能需要安装pygments pip3 install pygments (二)使用ivtk显示立 ...

  4. CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果

    CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...

  5. 设计模式(七): 通过转接头来观察"适配器模式"(Adapter Pattern)

    在前面一篇博客中介绍了“命令模式”(Command Pattern),今天博客的主题是“适配器模式”(Adapter Pattern).适配器模式用处还是比较多的,如果你对“适配器模式”理解呢,那么自 ...

  6. IL接口和类的属性

    上一篇文章学习了IL的入门,接下来我们再通过两个例子来了解下类的属性.构造函数以及接口的使用 一.类的属性.构造函数 1.先看下我们要构建的类的C#代码,然后再进行IL的实现,示例代码如下: [Ser ...

  7. java web学习总结(二十六) -------------------JSP属性范围

    所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...

  8. SAP CRM 通过调试观察CL_CRM_BOL_ENTITY中的数据

    这个(BOL里面)最重要的类值得一看. BOL中的每条记录都会在CL_CRM_BOL_ENTIT中表示.至今,我们已经写过一些事件处理器,并且我们已经直接或间接的通过这个类工作.在业务场景中,我们也许 ...

  9. 实时观察Apache访问情况的工具Apachetop

    Linux服务器的负载.进程等信息可以通过top命令查看.而Apache的运转如何实时的观察呢?“tail -f”log文件?这是个好方法,但是太累了! 所以,感谢Chris Elsworth为我们提 ...

随机推荐

  1. USACO2007 Protecting the Flowers /// 比值 前缀和 oj21161

    题目大意: 有N (2 ≤ N ≤ 100,000) 头牛偷吃花 将牛赶回牛棚需Ti minutes (1 ≤ Ti ≤ 2,000,000) 每头牛每分钟能吃Di (1 ≤ Di ≤ 100) 朵花 ...

  2. unity3D笔记の四种调用其他脚本方法

    第一种,被调用脚本函数为static类型,调用时直接用  脚本名.函数名() 第二种,GameObject.Find("脚本所在的物体的名字").SendMessage(" ...

  3. dubbo jar 配置文件

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  4. Android 开发 框架系列 OkHttp文件上传功能实现（含断点续传）

    前言 此篇博客只是上传功能的记录demo,如果你还不太了解okhttp可以参考我的另一篇博客https://www.cnblogs.com/guanxinjing/p/9708575.html 代码部 ...

  5. python和go对比字符串的链式处理

    一.什么是链式处理 对数据的操作进行多步骤的处理称为链式处理,链式处理器是一种常见的编程设计,链式处理的开发思想将数据和操作拆分,解耦,让开发者可以根据自己的技术优势和需求,进行系统开发,同时将自己的 ...

  6. golang中time包一个简单的时间格式输出

    一.代码 package main import ( "fmt" "time" ) func main() { //"2006-01-02 15:04 ...

  7. php开发面试题---面试常用英语（你能介绍你自己吗？）

    php开发面试题---面试常用英语(你能介绍你自己吗?) 一.总结 一句话总结: Could you please describe yourself? 1.为什么觉得自己适合这份工作? Why do ...

  8. 11 Python Libraries You Might Not Know

    11 Python Libraries You Might Not Know by Greg | January 20, 2015 There are tons of Python packages ...

  9. 51nod-1130-N的阶乘的长度V2（斯特林近似）-套斯特林公式

    输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3. 输入 第1行:一个数T,表示后面用作输入测试的数的数量.(1 <= T <= 1000) 第2 - T + 1行:每 ...

  10. POJ 1743-POJ - 3261~后缀数组关于最长字串问题

    POJ 1743 题意: 有N(1 <= N <=20000)个音符的序列来表示一首乐曲,每个音符都是1~~88范围内的整数,现在要找一个重复的主题.“主题”是整个音符序列的一个子串,它需 ...