Vue入门（4）过滤器

1.过滤器的作用

过滤器的作用：实现数据的筛选、过滤、格式化。

2.过滤器的使用

语法：
　　<any>{{表达式 | 过滤器}}</any>
举个例子：
　　<h1>{{price | myCurrency}}</h1>

3.过滤器的高级用法

在使用过滤器的时候，还可以指定参数，来告诉过滤器按照参数进行数据的过滤。
①如何给过滤器传参？
<h3>{{price | filPrice('￥')}}</h3>
②如何在过滤器中接收到？

new Vue({
　　filters:{
　　　　//myInput是通过管道传来的数据
　　　　//arg1在调用过滤器时在圆括号中第一个参数
　　　　//arg2在调用过滤器时在圆括号中第二个参数
　　　　myCurrency:function(myInput,arg1,arg2){
　　　　　　return 处理后的数据
　　　　}
　　}
})

<div id="app">
	<Fil></Fil>
</div>
<script>
	Vue.component('Fil',{
    	data : function(){
	        return {
	            price : 0
	        }
    	},
		template:`
			<div>
	            <input type="number" v-model="price"/>
	            <h3>{{price | filPrice('￥')}}</h3>
			</div>
		`,
	    filters : {
	        filPrice(myInput,arg1){
	            var result = arg1+myInput;
	            return result;
	        }
	    }
	})
	let vm = new Vue({
		el:'#app',
		data:{
		}
	})
</script>

4.全局过滤器

使用Vue.filter()方法

<div id="app">
	<Fil></Fil>
</div>
<script>

    Vue.filter("myReverse",function(val){
        return val.split("").reverse().join("")
    })
    
	Vue.component('Fil',{
	    data : function(){
	        return {
	            msg : "hello filter"
	        }
	    },
		template:`
			<div>
	        	<h4>{{msg | myReverse}}</h4>
			</div>
		`
	})
	let vm = new Vue({
		el:'#app',
		data:{

		}
	})
</script>