vue2.0过滤器filter全局和局部及传参

版权声明：请注明原处！ https://blog.csdn.net/qq_36245035/article/details/81231420

首先说全局，至少传一个本身的值。

		<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');