vue过滤器

**过滤器：**能改变数据的展示形式，不改变原数据。

全局过滤器

<div id="app">
	<!-- 过滤器使用： 数据 | 过滤器名 -->
	{{uname | upper}}
</div>

<script>
	// 全局过滤器
	Vue.filter("upper",function(value) {  // 参数value是数据
		// 返回值替换原数据
		return value.toUpperCase();
	});
	let vm = new Vue({
		el: "#app",
		data: {
			uname: "lily"
		}
	});
</script>

局部过滤器

<div id="app">
	<!-- 过滤器使用： 数据 | 过滤器名 -->
	{{uname | upper}}
</div>

<script>
	let vm = new Vue({
		el: "#app",
		data: {
			uname: "lily"
		},
		// 定义局部过滤器
		filters: {
			"upper" :function(value) {
				return value.toUpperCase();
			}
		}
	});
</script>

过滤器可以传多个参数

<div id="app">
	<!-- 过滤器使用： 数据 | 过滤器名 -->
	{{uname | upper("low")}}  // 变为小写展示
</div>

<script>
	// 全局过滤器
	Vue.filter("upper",function(value,flag) {  // 参数value是数据,flag是第二个参数
		if(flag === "low"){
			return value.toLowerCase();
		}
		return value.toUpperCase();
	});
	let vm = new Vue({
		el: "#app",
		data: {
			uname: "liLy"
		}
	});
</script>