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私有过滤器详解

语法

var vm = new Vue({
		el :'#app',
		data:{
			msg:'Hello HaiCoder'
		}，
    	filters :{
    		method1: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">
	var vm = new Vue({
		el :'#app',
		data:{
			msg:'Hello HaiCoder'
		},
		filters:{
			msgAppend:function(msg){
				return msg + ', Hello Vue Filter';
			}
		}
	})
</script>
</html>

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

03 vue filter private.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 | msgAppend(', Hello Vue Filter')}}</p>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			msg:'Hello HaiCoder'
		},
		filters:{
			msgAppend:function(msg, data){
				return msg + data;
			}
		}
	})
</script>
</html>

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

04 vue filter private.png

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

Vue filters私有过滤器总结

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