vue过滤器

vue过滤器

vue1.x中,默认还是提供一些过滤器的

vue2.x中,1个都没有了,而是通过简单的过滤器创建方式来替代

组件内的filter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
在options中加入属性filters,是一个对象
- 和methods类似
- key:过滤器名
- value:过滤器具体实现
- 使用方式 {{xxx| 过滤器名}}
<template>
<div>
请输入: <input type="text" name="" v-model="text">
反转后内容:{{text|reverseData}}
</div>
</template>
<script>
// 将当前输入的内容反转
export default {
data(){ //属性
return {
num:1,
text:'',
}
},methods:{}
,filters:{//组件内的过滤器
reverseData(value){ //value 是形参
// 过滤器名 过滤器实现
// 以上等同 reverseData:function(value){}
return value.split('').reverse().join('');
}
}
}
</script>

全局的filter

1
2
3
4
5
6
7
- Vue.filter('过滤器名',fn)
- fn(value形参){ return 显示值}
Vue.filter('reverseData',function(value){
return value;
});

method构造filter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
// 将当前输入的内容反转
export default {
methods:{
//当v-for涉及到的值发生改变,能否触发重新渲染
myFilter(heros){
console.log(this);
let tmp = [];
heros.forEach((ele) =>{
//this.range的改变,影响v-for重新计算
if(ele.score >= this.range){// this.range:19/59/89
tmp.push(ele);
}
});
return tmp;
}
}
}
</script>