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就在前面加上零，过滤器简单来说就是对数据进行过滤操作。

效果：