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

  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. C 常见字符串操作函数

    头文件 <string.h> 1. char *strstr(const char *str1, const char *str2);      判断str2是否为str1的子串  //s ...

  2. List<> ，string[]和string的相互转换

    1.string转换成string[]数组 string str = "aaa,bbb,ccc,dddd"; string[] strs = str.Split(','); 2.s ...

  3. 双十一HostGator独立服务器方案

    一年一度的“双十一”购物狂欢节到来,各大电商平台线上消费的各种“吸金”开启了“双十一”模式,一年一度的“双十一”网购狂欢又开始以“巨大的价格优势”来勾起消费者的购买欲望. 此次双十一期间,HostGa ...

  4. vagrant virtualbox 导入已导出的包和导出笔记

    导入 安装好virtualbox,vagrant软件之后, 将预先打包的 box 镜像导入到 vagrant 中 命令格式 vagrant box add <name> <boxpa ...

  5. 使用Fiddler模拟弱网络环境测试

    https://blog.csdn.net/swordgirl2011/article/details/51765237 https://www.cnblogs.com/longronglang/p/ ...

  6. 【JZOJ4811】排队

    description analysis 堆\(+\)树上倍增 考虑后序遍历搞出\(dfs\)序,那么要填肯定是从\(dfs\)序开始填 把每个点是序里第几位看成优先级,用小根堆来维护当前空着的优先级 ...

  7. 计算几何——直线交点poj1269

    求直线交点还是要推一个公式的.. 见博客https://blog.csdn.net/u013050857/article/details/40923789 还要学一下向量的定点比分法 另外poj精度好 ...

  8. 针对发送网络附件的java方法（使用Apache的jar包调用）

    1.先要在pom.xml文件中引入对应的jar包 <!--添加邮件的网络附件 start--> <dependency> <groupId>org.apache.c ...

  9. BZOJ 1296（SCOI 2009） 粉刷匠

    1296: [SCOI2009]粉刷匠 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 2544 Solved: 1466 [Submit][Statu ...

  10. css3 鼠标悬浮动画效果

    CSS3案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...