设定计算属性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 将绑定表达式限制为一个表达式.如果需 ...
随机推荐
- （一）hello word
1.在如图demo文件夹下可以编写自己的后端代码. 我们编写hello的接口代码如下: @RestController @RequestMapping("/hello") @Slf ...
- springcloud eureka server 检测 eureka client 状态
import com.netflix.discovery.shared.Applications; import com.netflix.eureka.EurekaServerContextHolde ...
- 【转载】C# 开源库大全非常好
原文地址:http://m.blog.csdn.net/woddle/article/details/37311877 C#开源大全 商业协作和项目管理平台-TeamLab 网络视频会议软件-VMuk ...
- shell 脚本 功能性语句 read，expr，test
1. read 从终端输入数据赋值给变量 read val 把读入的数据存放到val中 #!/bin/bash echo -n "please input two number :" ...
- (转)protobuf-----Mac 机器安装
转自: https://blog.csdn.net/u014534808/article/details/80203018 安装之旅 1. 下载protobufprotobuf下载页面 在此页面选择合 ...
- C# 创建DataTable并添加行和列
DataTable dt=new DataTable dt.Columns.Add("numview", typeof(Int32)); dt.Columns.Add(" ...
- python库之sklearn
一.安装sklearn conda install scikit-learn 参考文献 [1]整体介绍sklearn https://blog.csdn.net/u014248127/article ...
- sikuli+eclipse对于安卓app自动化测试的应用（第一次写博客，有些语言还不太专业，望海涵）
Sikuli是什么? 下面是来自于官网的介绍:Sikuli is a visual technology to automate and test graphical user interfaces ...
- 纯PHP Codeigniter(CI) ThinkPHP效率测试
最近一直想做一个技术类的新闻站点,想做的执行效率高些,想用PHP做,一直纠结于用纯PHP做还是用CI或者THINKPHP.用纯PHP效率高,缺点 n多,比如安全方面.构架方面等等等等:用CI.thin ...
- redis笔记_源码_简单动态字符串SDS
参照:https://zcheng.ren/sourcecodeanalysis/theannotatedredissourcesds/#sds%E5%B0%8F%E7%BB%93 这里用char b ...