1. 程式人生 > >vue2.0過濾器filter全域性和區域性及傳參

vue2.0過濾器filter全域性和區域性及傳參

首先說全域性,至少傳一個本身的值。

		<div id="app">
			{{message | demo}}
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
//			全域性
//			這裡至少傳一個本身的值
			Vue.filter('demo',function(val){
				return val + ' vue!';
			})
		    new Vue({
		        data: {
		            message:'hello'
		        }
		    }).$mount('#app');
		</script>

接下來是全域性傳多個引數

		<div id="app">
			<!--這裡把其他引數括號括起來-->
			{{message | demo('canshu1','canshu2')}}
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
//			全域性
//			這裡至少傳一個本身的值
			Vue.filter('demo',function(val,first,second){
				return val + first + second;
			})
		    new Vue({
		        data: {
		            message:'hello'
		        }
		    }).$mount('#app');

然後是全域性傳多個過濾器

		<div id="app">
			<!--多個全域性過濾器-->
			{{message | demo | demo2}}
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			Vue.filter('demo',function(val){
				return val + ' demo1 ';
			})
			Vue.filter('demo2',function(val){
				return val + ' demo2!';
			})
		    new Vue({
		        data: {
		            message:'hello'
		        }
		    }).$mount('#app');
		</script>

最後是區域性過濾器

		<div id="app">
			<!--多個區域性過濾器-->
			{{message | demo | demo2}}
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>

		    new Vue({
		        data: {
		            message:'hello'
		        },
//		        區域性過濾器定義一個fileters,在其裡面寫過濾器
		        filters:{
		        	demo:function(val){
		        		return val + ' demo1 ';
		        	},
		        	demo2:function(val){
		        		return val + ' demo2!';
		        	}
		        }
		    }).$mount('#app');