vue（一）过滤器全局过滤器和局部过滤器的使用以及区别2018-11-20

全局过滤器和局部过滤器的使用以及区别 2018-11-20

1.定义过滤器的条件：过滤器名称和处理函数
2.全局过滤器可以让所有vm实例共享；局部过滤器只针对指定的vm实例
3.当全局过滤器和局部过滤器的参数名字相同的时候，采用就近原则，优先调用局部过滤器
4.全局过滤器使用Vue.filter()   局部过滤器使用filters:{}
5.过滤器可以传递参数
6.过滤器可以传递多个参数
7.过滤器可以被多次调用

<!DOCTYPE html>
  <html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="big_box">
			<h1>{{dt | dateFormat()}}</h1>
		</div>
		<div id="box">
			<h1>{{dt | dateFormat()}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		//定义了一个全局过滤器
		Vue.filter('dateFormat', function(dateStr, pattern) {
			var dt = new Date(dateStr)
			var y = dt.getFullYear()
			var m = dt.getMonth() + 1
			var d = dt.getDate()
			var hh = dt.getHours()
			var mm = dt.getMinutes()
			var ss = dt.getSeconds()
			if(pattern && pattern.toLowerCase() == 'yyyy-mm-dd') {
				return `${y}-${m}-${d}`
			} else {
				return `${y}-${m}-${d} ${hh}:${mm}:${ss}---全局`
			}
		})
		//实例化一个vue
		var vms = new Vue({
			el: '#big_box',
			data: {
				dt: new Date()
			}
		})
		//实例化一个vue
		var vm = new Vue({
			el: '#box',
			data: {
				dt: new Date()
			},
			filters: { //定义一个局部过滤器
				dateFormat: function(dateStr, pattern) {
					var dt = new Date(dateStr)
					var y = dt.getFullYear()
					var m = dt.getMonth() + 1
					var d = dt.getDate()
					var hh = dt.getHours()
					var mm = dt.getMinutes()
					var ss = dt.getSeconds()
					if(pattern && pattern.toLowerCase() == 'yyyy-mm-dd') {
						return `${y}-${m}-${d}`
					} else {
						return `${y}-${m}-${d} ${hh}:${mm}:${ss}---局部`
					}
				}
			}
		})
	</script>
</html>

vue（一） 过滤器

全局过滤器和局部过滤器的使用以及区别 2018-11-20

vue（一）过滤器