Vue filters全局过滤器

Vue filters全局过滤器教程

Vue 允许自定义过滤器。Vue filters 全局过滤器可被用作一些常见的文本格式化。Vue filters 全局过滤器可以用在两个地方，mustache 插值 和 v-bind 表达式。

Vue filters 全局过滤器应该添加在 JavaScript 表达式的尾部，由管道符指示。Vue filters 全局过滤器就是所有的 VM 实例都是共享的，而 Vue filters 私有过滤器 是单个 VM 实例私有的。

Vue 过滤器调用的时候，采用的是就近原则，如果 Vue 私有过滤器和 Vue 全局过滤器名称一致，这时候优先调用私有过滤器。

Vue filters全局过滤器详解

语法

Vue.filter('过滤器名称', function(){})

说明

过滤器中的 function，第一个参数，是规定死的，永远都是过滤器管道符前面传递过来的数据。

案例

Vue filters全局过滤器

<!DOCTYPE html>
<html>
<head>
	<title>Vue filter 过滤器</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
	<div id="app">
		<p>{{msg}}</p>
		<p>{{msg | msgAppend}}</p>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	Vue.filter('msgAppend', function(msg){
		return msg + ', Hello Vue Filter';
	})
	var vm = new Vue({
		el :'#app',
		data:{
			msg:'Hello HaiCoder'
		}
	})
</script>
</html>

浏览器运行效果如下图所示：

01 vue filter global.png

我们看到，第一个 msg 的内容被原样输出了。第二个 msg 的内容，被使用 Vue filter 将原来的 msg 内容后面增加了 Hello Vue Filter 字符串。

Vue filters全局过滤器传参

<!DOCTYPE html>
<html>
<head>
	<title>Vue filter 过滤器</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
	<div id="app">
		<p>{{msg}}</p>
		<p>{{msg | msgForamt('疯狂')}}</p>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	Vue.filter('msgForamt', function(msg, arg){
		return msg.replace(/单纯/g, arg)
	})
	var vm = new Vue({
		el :'#app',
		data:{
			msg:'曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的人'
		}
	})
</script>
</html>

浏览器运行效果如下图所示：

02 vue filter global.png

我们看到，第一个 msg 的内容被原样输出了。第二个 msg 的内容，被使用 Vue filter 将单纯全局替换成了疯狂。

Vue filters全局过滤器总结

Vue 允许自定义过滤器。Vue filters 全局过滤器可被用作一些常见的文本格式化。Vue filters 全局过滤器可以用在两个地方，mustache 插值和 v-bind 表达式。