设定计算属性setter
<!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(10800)">把含税改价为10800円</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
price: 29980
},
computed: {
priceInTax: {
get:function(){
return this.price * 1.08;
},
set: function(value){
this.price = value / 1.08;
}
},
priceChinaRMB: function(){
return Math.round(this.priceInTax / 16.75);
},
},
methods: {
btnClick: function(newPrice){
this.priceInTax = newPrice;
},
},
});
</script>
</body> </html>
设定计算属性setter的更多相关文章
- vue——计算属性和侦听器
一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...
- Vue计算属性和监听属性
一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ mess ...
- 3-4 计算属性的setter和getter
Vue中的计算属性的setter和getter //如上,fullName这个方法在取这个数据的时候,会执行get中的方法:而在设置数据时,会执行set中的方法.其中set中有个参数(value),用 ...
- vuejs计算属性getter和setter
当页面获取某个数据的时候,先会在data里面找,找不到就会去计算属性里面找,在计算属性里面,获取的时候会自动去执行get方法 <div id='app'> {{fullName}} < ...
- Vue 过滤器与计算属性
过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...
- Vue#计算属性
在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一 ...
- Vue.js基本规则提炼总结及计算属性学习
Vue.js基本须知: 1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值; 2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容, ...
- Swift面向对象基础（中）——Swift中的存储属性和计算属性
学习来自<极客学院> 1.存储属性:存储在类.结构体里的变量或者常量 2.分为:实例存储属性.类型存储属性 3.所有的存储属性必须显示的指定初始值,在定义时或者构造器当中指定 4.可选类型 ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
随机推荐
- iOS开发系列-支付宝支付
概述 开发中支付通常都会集成支付宝支付,下面讲解支付宝的整体流程. 集成支付宝支付的流程 签约 与支付签约,得到获取商户的ID(partner).账户ID(seller).私钥privateKey. ...
- css---6伪元素选择器
after :在内容后边 <!DOCTYPE html> <html lang="en"> <head> & ...
- Tool Zip 破解
//侵权请联系我进行删除 email:YZFHKM@163.com 0x00 fcrackzip简单介绍 fcrackzip是一款专门破解zip类型压缩文件密码的工具,工具小巧方便.破解速度快,能使用 ...
- 「题解」：$Game$
问题 B: $Game$ 时间限制: 1 Sec 内存限制: 256 MB 题面 题面谢绝公开. 题解 对于最初加入的每一个元素开桶记录出现次数. 然后记录一个前p个元素最大值. 先由先手玩家取走一 ...
- kubernetes istio之gateway
[root@master istio-]# kubectl apply -f samples/httpbin/httpbin.yaml service/httpbin created deployme ...
- （转）Wireshark "The NPF driver isn’t running…"(
转:http://blog.sina.com.cn/s/blog_4bfd07180100e3ar.html 前几天重装系统,装上了windows7 RC系统.昨天开始尝试装上了wireshark 这 ...
- 汽车超人CEO郑超:不惧资本寒冬 融资已增至57亿
汽车超人CEO郑超:不惧资本寒冬 融资已增至57亿 来源:互联网 时间:2017-06-01 阅读:3次 篇一 : 汽车超人CEO郑超:不惧资本寒冬 融资已增至57亿 近日记者获悉,金固股份旗 ...
- 转：Linux环境下段错误的产生原因及调试方法小结
源地址:http://www.cnblogs.com/panfeng412/archive/2011/11/06/2237857.html 补充:http://baike.baidu.com/link ...
- 求N！中素数的个数
int degree_in_fact(int n, int x)//求n!中素数x的次数 { if(m) return degree_in_fact(n/x,x)+n/x; ; }
- PAT甲级——A1112 Stucked Keyboard【20】
On a broken keyboard, some of the keys are always stucked. So when you type some sentences, the char ...