1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4. <head>
  5.     <title></title>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  9.     <link href="../css/style.css" rel="stylesheet"> </head>
  10.  
  11. <body>
  12. <div id="myApp">
  13.     <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p>
  14.     <button @click="btnClick(10800)">把含税改价为10800円</button>
  15. </div>
  16. <script>
  17.     var myApp = new Vue({
  18.         el: '#myApp',
  19.         data: {
  20.             price: 29980
  21.         },
  22.         computed: {
  23.             priceInTax: {
  24.                 get:function(){
  25.                     return this.price * 1.08;
  26.                 },
  27.                 set: function(value){
  28.                     this.price = value / 1.08;
  29.                 }
  30.             },
  31.             priceChinaRMB: function(){
  32.                 return Math.round(this.priceInTax / 16.75);
  33.             },
  34.         },
  35.         methods: {
  36.             btnClick: function(newPrice){
  37.                 this.priceInTax = newPrice;
  38.             },
  39.         },
  40.     });
  41. </script>
  42. </body>
  43.  
  44. </html>

设定计算属性setter的更多相关文章

  1. vue——计算属性和侦听器

    一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...

  2. Vue计算属性和监听属性

    一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ mess ...

  3. 3-4 计算属性的setter和getter

    Vue中的计算属性的setter和getter //如上,fullName这个方法在取这个数据的时候,会执行get中的方法:而在设置数据时,会执行set中的方法.其中set中有个参数(value),用 ...

  4. vuejs计算属性getter和setter

    当页面获取某个数据的时候,先会在data里面找,找不到就会去计算属性里面找,在计算属性里面,获取的时候会自动去执行get方法 <div id='app'> {{fullName}} < ...

  5. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

  6. Vue#计算属性

    在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一 ...

  7. Vue.js基本规则提炼总结及计算属性学习

    Vue.js基本须知: 1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值; 2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容, ...

  8. Swift面向对象基础（中）——Swift中的存储属性和计算属性

    学习来自<极客学院> 1.存储属性:存储在类.结构体里的变量或者常量 2.分为:实例存储属性.类型存储属性 3.所有的存储属性必须显示的指定初始值,在定义时或者构造器当中指定 4.可选类型 ...

  9. Vue.js学习 Item5 -- 计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

随机推荐

  1. 转——调试寄存器 原理与使用：DR0-DR7

    下面介绍的知识性信息来自intel IA-32手册(可以在intel的开发手册或者官方网站查到),提示和补充来自学习调试器实现时的总结. 希望能给你带去有用的信息. (DRx对应任意的一个调试寄存器. ...

  2. 记录装CDH新增加一些遇到问题的解决

    报错信息:MainThread agent ERROR Heartbeating to localhost:7182 failed.解决:配置CM Agentcm的安装包的server和agent都是 ...

  3. mac NTFS 关于错误-36，rm Input/output error

    当传输文件时出现Mac错误代码36 当我向一个U盘或存储卡里传输文件时,出现了Mac Error Code36,我该如何解决? Mac,传输文件,错误代码36,U盘,卡片 Mac OS X Snow ...

  4. winsock 服务器代码（不建议win服务器listen防火墙会禁止外部访问的）

    int SessionBase::ServerSock() { /* 4 * WSADATA是个结构体,在WSAStartup中被填充. 5 * WSAStartup为调用WinSock准备初始化的工 ...

  5. CSIC_716_20191114【生成器、匿名函数、内置函数、三元表达式、列表生成式、生成器表达式】

    生成器: 函数与yield连用,凡是函数中有yield的,调用该函数的时候均不会立即执行,而是会返回一个生成器. 生成器本质上是一个迭代器,需要通过    [生成器.__next__()]或者[nex ...

  6. 校园商铺-2项目设计和框架搭建-5配置maven

    /src/main/java 存放业务的Java代码 /src/main/resources 存储项目所用到的资源文件,如各种Spring,batis,日志的配置文件 /src/test/java 单 ...

  7. LUOGU P3919 【模板】可持久化数组(主席树)

    传送门 解题思路 给每一时刻建一棵线段树维护当前时刻的值,然后修改的时候直接修改,查询的时候直接查,记住查询完后一定要复制. 代码 #include<iostream> #include& ...

  8. "一个实用的却被忽略的命名空间:Microsoft.VisualBasic"：

        当你看到这个命名空间的时候,别因为是vb的东西就匆忙关掉网页,那将会是您的损失,此命名空间中的资源最初目的是为了简化vb.net开发而创建的,所以microsoft.visualbasic并不 ...

  9. VS2010-MFC（文档、视图和框架：各对象之间的关系）

    转自:http://www.jizhuomi.com/software/223.html 前面一节进行了文档.视图和框架的概述,本节主要讲解文档.视图.框架结构中各对象之间的关系. 各个对象之间的关系 ...

  10. [SNOI2017]遗失的答案

    题目 首先\(G,L\)肯定会满足\(G|L\),否则直接全部输出\(0\) 之后我们考虑一下能用到的质因数最多只有\(8\)个 同时我们能选择的数\(x\)肯定是\(L\)的约数,还得是\(G\)的 ...