vue中的filters过滤器

发表于 更新于 分类于 阅读次数：


Vue2.0以后内置过滤器都去掉了，要用filters只能自定义写。

一、自定义filters过滤器

过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算

二、局部定义的fliters

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
    {{ message | toUpperCase}}
</div>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data:{
            message:'hello world'
        },
        filters:{
            toUpperCase(val){
                return val.toString().toUpperCase();
            }
        }
    })
</script>

运行结果图:
0

三、可以设置多个过滤器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
    {{ message | toUpperCase | changeColor}}
</div>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data:{
            message:'hello world'
        },
        filters:{
            toUpperCase(val){
                return val.toString().toUpperCase();
            },
            changeColor(val){
                return val.toString().replace('HELLO','hello')
            }
        }
    })
</script>

运行结果图:
1

四、全局定义的filter

1：在main.js里定义:

1
2
3
Vue.filter("定义的过滤器名字", function(val) {
  return val + "aa";
});

2:在需要处理数据的地方调用自定义过滤器

1
{{msg|自定义的过滤器名字}}
相关博客