设定计算属性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 将绑定表达式限制为一个表达式.如果需 ...
随机推荐
- lambda x:i*x for i in range(4)
解决方法:冒号前添加接收 i 的变量 return [lambda x,i=i: i * x for i in range(4)]
- startup_stm32f10x_xx.s 启动代码文件选择
引用http://blog.csdn.net/gasbi/article/details/7545568 整体感觉stm32给的库文件太琐碎了,正如它的芯片型号一样繁多,例如启动文件: 网上查到的各个 ...
- java笔试之查找组成一个偶数最接近的两个素数
任意一个偶数(大于2)都可以由2个素数组成,组成偶数的2个素数有很多种情况,本题目要求输出组成指定偶数的两个素数差值最小的素数对. package test; import java.util.Sca ...
- 2018-8-10-使用-IncrediBuild-提升-VisualStudio-编译速度
title author date CreateTime categories 使用 IncrediBuild 提升 VisualStudio 编译速度 lindexi 2018-08-10 19:1 ...
- javascript 的学习笔记（第一天）
1.==与=== == 先转换类型,再比较 === 直接比较 2.parseInt 把字符串转成整数 parsefloat 把字符串转成小数 3. 变量的作用域:变量起作用的范围 局部变量: ...
- Sublime Text自定制代码片段(Code Snippets)
在编写代码的整个过程中,开发人员经常会一次又一次的改写或者重用相同的代码段,消除这种重复过程的方法之一是把我们经常用到的代码保存成代码片段(snippets),这使得我们可以方便的检索和使用它们. 为 ...
- scala中Array简单实用
/** * 在scala中数组的使用 * 和java很类似,初始化后,长度就固定了,而且元素全部根据其类型初始化 * */ object arrayUse { def main(args: Array ...
- C++——类的多继承
多继承概念 一个类有多个直接基类的继承关系称为多继承 多继承声明语法 class 派生类名 : 访问控制 基类名1 , 访问控制 基类名2 , … , 访问控制 基类名n { 数据成员和成 ...
- VS开发工具的常用插件
转 http://www.spersky.com/post/vsPlugins.html 我目前主要用的是Hide Main Page——公司配给的电脑屏幕分辨率好小,还是1366*768的,去掉头可 ...
- Windows便筏快捷键
Ctrl + L:左对齐 Ctrl + E:居中对齐 Ctrl + R:右对齐 Ctrl + B:加粗 Ctrl + I:斜体 Ctrl + U:给文字添加下划线 Ctrl + T: 给文字添加删除线 ...