vue（12）过滤器的用法

vue中过滤器分为局部过滤器和全局过滤器，全局过滤器一般使用Vue.filter，局部过滤器则是在vue实例中使用filter，全局和局部语法基本一样，这里就以局部过滤器为例，先上代码，为了方便就在之前的代码中添加：

<template>
	<div id="testa">
		{{ name }}
		<br />
		<button id="a">看下面</button>
		<ul>
			<li v-for="(v, k) in name" :key="k" :class="{ a1: flag1, a2: flag2 }" @click="change()">{{ k }} {{ v | addzero }}</li>
		</ul>
		<br />
	</div>
</template>

<script>
export default {
	name: 'test',
	data() {
		return {
			name: [2, 3, 6, 87, 5, 1, 35, 12],
			flag1: true,
			flag2: false
		};
	},
	methods: {
		change() {
			this.flag1 = !this.flag1;
			this.flag2 = !this.flag2;
		}
	},
	filters: {
		addzero(data) {
			var newdata;
			data < 10 ? newdata='0' + data :newdata=data;
			return newdata;
		}
	}
};
</script>
<style>
#a {
	width: 100px;
	height: 50px;
}
.a1 {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
}

.a2 {
	cursor: pointer;
	background-color: white;
	color: black;
}
</style>

代码的vue实例中添加了filters对象，对象中包含函数addzeros，同时在模板中添加了{{v|addzeros}}其意义是下面输出的数字小于10就在前面加上零，过滤器简单来说就是对数据进行过滤操作。

效果：