Vue 定义过滤器

1.使用

概念：过滤器可以在目标文本做自定义操作，例如：表单验证，首字母大写，将日期格式化等

过滤器只能在 {{ }} 和 v-bind 中使用

1.全局过滤器

定义全局过滤器直接在 Vue 实例对象外定义即可

在使用 {{ }} 输出数据时，可以直接在括号中加上 | +过滤器名称 ，如下

//html
<p>{{ msg | msgFilter }}</p> //使用过滤器。
//此处 msgFilter 可以传参数。对应过滤器的第二个以及之后的参数

//js
Vue.filter('msgFilter', function(msg)){ //定义全局过滤器
	//.........
}

var vm = new Vue({
//....
	data:{
		msg:'明天的明天'
	}
//....
} )

这时 ，我们就可在 msgFilter 的回调函数中设置过滤操作了
此时我们使用过滤器将 msg 中的明天替换成后天

Vue.filter('msgFilter', function(msg)){ //定义过滤器
	return msg.replaceAll('明天','后天') //return 实际上直接返回给 html 中了
}

这时网页上呈现的就是 '后天的后天' 了

注意：上述过滤器并没有改变 data 中的 msg ，只是更改了msg输出到 html 中的值

调用多个过滤器

调用格式如下

<p>{{ msg | msgFilter | msgFilter2}}</p> //使用过滤器

//js
Vue.filter('msgFilter', function(msg)){ //定义过滤器
	//.........
}
Vue.filter('msgFilter2', function(msg)){ //定义过滤器
	//.........
}

上述的调用方法，会使两个过滤器一起对msg生效

2.私有过滤器（局部）

私有过滤器在Vue实例对象内定义，与全局定义有一点不同，但原理都是一样的

私有过滤器直接在Vue实例中的，filters 属性中定义，如下

//js
var vm = new Vue({
	//.....
	filters:{
		ft1: function(dataStr,arg){ //...... }
		ft2: function(dataStr,arg){ //...... }
		//可以定义多个过滤器
	}
	//.....
})

过滤器优先级：私有 > 全局