vue监听和计算属性的基本使用

1. 监听属性基本使用：

html: <div>{{order.ship_money}}</div>
js:
data:{
    order:{ship_money:0},
    ship_money:'0'
},
//监听运费：
watch: {
    'order.ship_money': function(newVal,oldval){
        this.ship_money=newVal;
    },
},

2.计算属性基本使用：

html:<div>{{totalmoney}}</div>
js:
data:{
    order:{
        delivery_style:1,//配送方式：1自提,2送货,3物流,4快递
        ship_money_style:2,//运费支付方式：1寄付，2到付；
    },
    computItem:{total_fee:10},//订单总额
    ship_money:10,//运费
},
computed:{
        totalmoney:function(){ //计算总额：自提时，运费0，不加运费；到付时，不加运费；其他都加；
            var money = 0;
            if (this.order.delivery_style!=1&&this.order.ship_money_style!=2){
                money = parseFloat(Number(this.computItem.total_fee)+Number(this.ship_money)).toFixed(2);
            }else{
                money = this.computItem.total_fee;
            }
            return  money;
        }
    },

3.事件封装，及钩子使用执行操作方法：

 created:function(){
       //方法执行，先运行的内容处理；
 },
  methods:{//事件的方法封装；
        //返回上一页（历史记录)
        goBack:function(){
            let start, current, step;
            const params = location.search.match(/historyCursor=(\d+)/);
            if(params instanceof Array && params.length === 2) {
                // 如参数中带有historyCursor, 返回时将回跳n步
                start = +params[1];
                current = history.length;
                step = current - start + 1;
                location.go(-step);
            } else {
                // 默认将返回上一个页面
                history.back();
            }
        },
 }