Vue.js火速上手第十四章——Vue过滤器的使用

一、在index.html中加入过滤器

			

				mm 

				{{length | meter}}
			

二、在main.js中定义过滤器

     并初始化length，在过滤器中，

    val=val || 0;  //如果val为空，则显示0
    unit=unit || '米'; //如果unit为空，则显示米。

Vue.filter('meter',function(val,unit){
	val=val || 0;
	unit=unit || '米';
	return (val/1000).toFixed(2)+unit;
});

new Vue({
		el: '#app',
		data:{
			url:'http://www.baidu.com',
			length:10,
		},
		methods:{
			},
});

效果如下：

三、过滤器中初始化

在index.html中初始化管道

			

				 

				{{price | currency("USD")}}
			

在main.js中定义过滤器

Vue.filter('currency',function(val,unit){
	val=val || 0;
	unit=unit || '元';
	return val+unit;
});

new Vue({
		el: '#app',
		data:{
			url:'http://www.baidu.com',
			price:10,
		},
		methods:{
			},
});

如果currency为空，则currency为元，但是Index中初始化了currency为“USD”，所以显示效果如下

四、本篇完整代码如下

		

			

				mm 

				{{length | meter}}
			
			

			

				 

				{{price | currency("USD")}}
			
		

Vue.filter('currency',function(val,unit){
	val=val || 0;
	unit=unit || '元';
	return val+unit;
});
Vue.filter('meter',function(val,unit){
	val=val || 0;
	unit=unit || '米';
	return (val/1000).toFixed(2)+unit;
});
new Vue({
		el: '#app',
		data:{
			price:10,
			length:10,
		},
		methods:{
			},
});