Vue从入门到实战：全局过滤器与局部过滤器

来自CloudWiki
跳转至： 导航， 搜索

背景介绍

在Vue.js中，过滤器主要用于文本的格式化，或者数组数据的过滤与排序等。从Vue.js 2.0.0版本开始，内置的过滤器被删除了，如果使用过滤器，需要自己编写

过滤器的分类

过滤器本质上是一个函数，与自定义指令相似，过滤器也分为全局过滤器和局部过滤器。

全局过滤器

全局过滤器使用Vue.filter()方法来注册， 

 Vue.filter(id,[definition])

局部过滤器

局部过滤器是在Vue实例的选项对象中使用filter选项来注册

举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<p>{{message | capitalize}}</p>
		</div>
	
		<script src="vue.js"></script>
		<script>
			Vue.filter('capitalize', function (value) {
			  if (!value) return '';
			  value = value.toString();
			  return value.charAt(0).toUpperCase() + value.slice(1);
			})
			
			
			var vm = new Vue({
		    el: '#app',
		    data: {
		    	message: 'hello world'
		    },
		    /*filters: {
		    	capitalize: function (value) {
				    if (!value) return '';
				    value = value.toString();
				    return value.charAt(0).toUpperCase() + value.slice(1);
				  }
		    }*/
		  });
		</script>
	</body>
</html>

注意：

1）当全局过滤器和局部过滤器重名时，会采用局部过滤器

2）全局过滤器可在任何Vue实例的模板中使用，而局部过滤器只能在该实例绑定的视图中使用。

3）过滤器可以用在两个地方：双花括号插值和 v-bind表达式，使用时通过管道符（|）添加到表达式的尾部使用。

取自“http://www.openbrains.net/mediawiki/index.php?title=Vue从入门到实战：全局过滤器与局部过滤器&oldid=24922”