在开发中,往往显示在页面上的数据需要经过特殊的处理,如果我们每次在渲染页面的时候来更改数据的格式,那样很麻烦,也加大了开发负担。那么有没有一个方式,可以统一的格式化数据。在Vue中就有过滤器来处理展示在页面上的数据
加过滤器()只改变显示的效果,不改变原数据
在{{}}中的数据之后加上 | 后边是过滤器函数
我们在下边的页面中使用 tofixed("时间") 将“时间”作为参数传递
<tr v-for="(data,index) in play">
<th>{{index+1}}
<input type="checkbox">
</th>
<th>{{data.name}} </th>
<!--过滤器 原数据不变 只改变显示效果-->
<th>{{data.date | tofixed("时间")}} </th>
<th>{{data.time}} </th>
<td>
<button class="btn btn-danger">删除</button>
</td>
</tr>
数据处理
Vue有filters命令来自定义过滤器在filters中我们定义tofiexd()方法:
tofixed(参数1,参数2) 参数1是 页面中 | 前边的数据 参数2是tofixed中传递的参数。我们只需要在tofixed()中将处理过后的数据返回就可以了。
var vm = new Vue({
el: '#app',
filters: { //可以有很多的自定义过滤器
tofixed(input, param1) { //这里的this 是window input是指 | 符号之前的数据 param1 是参数,可以用更多的参数
return param1 + input;
}
})