5.vue 过滤器

原创已于 2022-08-26 10:46:59 修改

· 102 阅读

0 ·

版权

文章标签：

#vue.js #前端 #javascript

于 2022-08-26 10:44:47 首次发布

VUE学习专栏收录该内容

6 篇文章

订阅专栏

过滤器就是可以对我们的数据进行添油加醋然后再显示

过滤器有全局过滤器和组件内的过滤器

全局过滤器 Vue.filter('过滤器名',过滤方式fn );
组件内的过滤器 filters:{ '过滤器名',过滤方式fn }
使用 {{ msg | 过滤器名}}
最终都是在过滤方式fn里面return产出最终你需要的数据

<body>
	<div id="app">
		<input type="text" v-model='name'>
		{{name}}
		{{name|fck}}		
	    {{name|fck2('no')}}
	</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
	
	//全局过滤器  多个参数
	Vue.filter('fck2',function(val,arg2){
		return arg2+val;
	})
	
	new Vue({
		el:'#app',
		data(){
			return{
				name:''
			}
		},
		//组件过滤器
		filters:{
			fck(val){
	          return 'fck'+val
					 	  
			}		
		}			
	})
	
</script>