vue2.X基础知识二之数据计算

1、filters过滤

前端在展示后端传递过来的数据时，往往不能直接显示出来，需要经过一些转换，比如后端有个字段是datetime格式的，到了前端会发现是一个很奇怪的字符串，这个时候，通常需要写一个函数来格式化一下，在vue中，我们可以使用filter来增加一个函数用于格式化输出；这里我们以输入人民币，自动转换为美元为需求。例子如下：

		
今日美元兑换人民币的汇率为：{{ rate }}
		

			
我要换美元
			
请输入金额(元)：
			
兑换为美元的金额：{{ rmb | formatPrice(rate, 1) }}
		
		

			
我要换人民币
			
请输入金额(美元)：
			兑换为人民币的金额：
		
    

        var app = new Vue({
            el: "#app",
            data: {
            	rate: 6.3589, //汇率
            	rmb: 0,       //人民币
            	dollar: 0     //美刀
            },
            //过滤器
            filters: {
            	formatPrice: (price, rate,isRMB) => {
                         //单位
                         let suffix = '$';
            		if (!isRMB) {
            			suffix = '¥';
            		} else {
            			rate = (1/rate).toFixed(4);
            		}
            		
            		return parseFloat(price*rate).toFixed(2) + ' ' +suffix;
            	}
            }
        });
		

由于vue2.X中过滤器只能应用在{{}}和v-bind中；所以在v-html里面运用了vue实例的一个属性$options来使用过滤器，输出人民币符号，效果如下：

2、computed计算属性

computed是处理数据的另一个方式，避免在模板中加入过程的业务逻辑，保证模板的结构清晰和可维护性。应用场景：处理商品价格时，后端会把价钱定义为以分为单位的整型，避免在处理浮点类型数据时产生问题。前端则需要把价钱转换成元来显示，如果价钱需要修改，则又需要把输入的价格再恢复分，再传给后台，非常麻烦；我们来使用vue的computed计算属性看看如何轻松解决这个需求：

.price {
		display: inline-block;
		text-decoration: line-through;
	}

我们想象下，这里是超市商场的吊牌，显示着原价，因为原价在之后是不需要改变的，所以，这里我用了v-once来使原价始终等于cents的初始值(见下面的js代码)；促销价则是我们稍后输入进去的值，这个值是需要传递给后台的；我们给促销价的input绑定了一个input事件，处理这个事件的函数定义在methods里的getValue()方法中(见下面js代码)，并将当前事件对象$event传递了过去;

    	

    		原价: 
{{ price }}
 ¥
    	
    	
促销价: 
    	
传递给后台的值：{{ cents }}
    

在初始化的时候，我们给computed的price对象设置了两个钩子函数get和set，当访问price时，会调用它的get钩子函数，返回以元为单位的数据给前端展示；当给price设置值时，会调用它的set钩子函数，并将传递进来的新值转换为以分单位赋值给cents；

var app = new Vue({
            el: "#app",
            data: {
            	cents: 100000, //后端传过来的以'分'为单位的money
            	classname: 'price'
            },
            methods: {
            	getValue ($event) {
            		this.price = $event.target.value || 0; //当input的值为空时，设置为0
            	}
            },
            //实时计算  当数据有变化的时候执行
            computed: {
            	price: {
            		set (newValue) {
            			this.cents = parseFloat(newValue)* 100;
            		},
            		get () {
            			return (this.cents/100).toFixed(2);
            		}
            	}
            }
        });

当我们输入促销价时，触发了input事件，调用了getValue事件处理函数，此函数给price设置了新的值，从而触发了price的set钩子函数，所以，cents自动转换为了以分为单位的新值；效果如下：