Vue中监听属性的小案例

今天学习了一下在jq22官网发现的一个小案例，里面 运用到蛮多的 watch 监听事件和一个过滤器的小方法，在这里仿一下该案例。

先查看一下成型后的效果：

 1.先做基础样式和布局

因为页面中数据都是和 Vue 实例数据中心进行绑定的，所以再写布局时，就直接把数据通过

插值表达式去 表达了

布局部分：

 <div id="app">
        <p>
            买入单价：<input type="number" v-model="mairu">
            <span class="small">元/克</span>
        </p>
        <p>
            卖出单价：<input type="number" v-model="maichu">
            <span class="small">元/克</span>
        </p>
        <p>
            手续费率：<input type="number" v-model="rate"> 
            <span class="small">%（默认手续费率为：3%）</span>
        </p>
        <p>
            购买数量：<input type="number" v-model="num">
            <span class="small">克</span>
        </p>
        <hr>
        <div class="box">
            <p>成本价：{{cbj}} <span>({{mairu}}*{{num}})</span></p>
            <p>手续费：{{sxf}}<span>({{maichu}}*{{num}}*{{rate}}*0.01)</span></p>
            <p>卖出价：{{out_sell}}</p>
            <p>赎回获得：{{shget}}</p>
            <p>净收入：{{have}}</p>
        </div>
    </div>

 这里不做样式了，在data数据中心，声明好上面需要的 变量：

data:{
                mairu:0,//买入单价
                maichu:0,//卖出单价
                num:1,//购买数量
                rate:0.3,//手续费率
                cbj:0,//成本价
                sxf:0,//手续费
                shget:0, // 赎回获得
                have:0, //净收入
                out_sell:0, // 卖出价格
            }

这时候大概就是这个样子：

 2.定义一个局部过滤器，让数值保留到小数点后两位：

 toFixed(2)小数点后保留两位小数（）里面是几就保留几位

   filters:{
                numFilter(data){
                    return parseFloat(data).toFixed(2)
                }
            }

调用过滤器：

<div class="box">
           <p>成本价：{{cbj|numFilter}} <span>({{mairu}}*{{num}})</span></p>
           <p>手续费：{{sxf|numFilter}}<span>({{maichu}}*{{num}}*{{rate}}*0.01)</span></p>
           <p>卖出价：{{out_sell|numFilter}}</p>
           <p>赎回获得：{{shget|numFilter}}</p>
           <p>净收入：{{have|numFilter}}</p>
        </div>

查看效果：

3.在 methods 方法中心定义一些方法来计算 成本价，手续费，卖出价，赎回价格，净收入

    methods:{
                // 计算公式
                calculation:function(){
                    // 成本价的计算
                    this.cbj = (this.mairu*this.num).toFixed(2);
                    // 卖出价格
                    this.out_sell = this.maichu*this.num;
                    // 手续费
                    this.sxf = this.maichu*this.num*this.rate*0.01;
                    // 赎回获得
                    this.shget = this.out_sell-this.sxf;
                    // 净收入
                    this.have = this.out_sell-this.sxf-this.cbj;
                }
            }

这时候虽然计算方法写好了，但是由于数据没被监听，所以当改变数值的时候，不会发生改变

这时候就需要 事件监听 来监听数据的改变

     watch:{ 
                mairu(val){
                    // 让数据中心的值等于监听到的值
                    this.mairu = val
                    // 把监听到的最新值重新赋值给方法中心去使用
                    this.calculation();
                },
                maichu(val){
                    // 让数据中心的值等于监听到的值
                    this.maichu = val;
                    // 把监听到的最新值重新赋值给方法中心去使用
                    this.calculation();
                },
                num(val){
                    // 让数据中心的值等于监听到的值
                    this.num = val;
                    // 把监听到的最新值重新赋值给方法中心去使用
                    this.calculation();
                },
                rate(val){
                    // 让数据中心的值等于监听到的值
                    this.rate = val;
                    // 把监听到的最新值重新赋值给方法中心去使用
                    this.calculation();
                }
            }

这时候就做好了