vue.js 使用自定义的过滤器

vue.js自定义过滤器

前言

---

过滤器是modal和view的之间的处理，在数据渲染到页之前，可以对数据再进行最后的操作。vue.js提供了自定义的过滤器。

代码部分

---

	<!-- html 部分-->
	<div id="app">
			<p>{{ msg | myfilter}}</p>
	</div>

	<!-- 脚本部分-->
	<script>
		<!-- 这里定义自己的过滤器（全局的） -->
		Vue.filter('myfilter',function(msg){
			return msg.replace('预','');
		});
		
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'预渲染的内容'
			}
		});
	</script>

---

总结

过滤器的第一个参数是要处理的渲染数据，第二个参数是传参1，依次类推。

1. 先自定义一个过滤器

   Vue.filter('myfilter',function(data,参1,参2){
   	  //做一些自定义的处理,data就是即将渲染的数据
   	  return data;
   });
   

2. 然后在插值表达式中应用过滤器

   {{ msg | myfilter('参1','参2') | myfilter2 }}
   //先将msg传给myfilter处理，处理的结果再传给myfilter2处理。
   

---

扩展

过滤器的全局与私有，如果过滤器的名字相同，优先采用私有的过滤器。

• 全局过滤器
  上面的代码定义的是全局过滤器，意味着该过滤器对所有的vm实例都能使用中都能使用
• 私有过滤器
  如何定义？

  var vm = new Vue({
  	el:'#app2',
  	filters:{
  		myfilter2:function(data,参1,参2...){
  				//一些处理			
  		}		
  	}
  });