一、什么是过滤器?
过滤器是在数据渲染时,根据使用的过滤器来渲染数据,过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。
二、过滤器怎样使用?
渲染时使用 “| 过滤器名称”。eg: v-for=”val in arr | filterBy ‘a’
取包含’a’的数据
三、常用过滤器介绍
1、debounce ------配合事件,延迟执行
eg: @keyup=”functionname | debounce 2000 ”
2、limitBy 配合数据,限制几条数据
eg:v-for=”val in arr | limityBy 2 1”
从下标为1的元素开始取两条数据
eg:v-for=”val in arr | limityBy 2”
只取前2条数据
3、filterBy 取包含某个元素的数据
eg: v-for=”val in arr | filterBy ‘a’
取包含’a’的数据
4、orderBy 1(升序)/2(降序)排序
eg: v-for="val in arr | orderBy 1"
升序排序
eg: orderBy 年龄 1 按年龄升序排序
三、自定义过滤器
时间过滤器
<div class="box">
</div>
<script type="text/javascript">
Vue.filter('date',function(input){
var oDate=new Date(input);
return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
});
var vm=new Vue({
el:'.box',
data:{
a:Date.now()
},
methods:{
}
});```
网友评论