过滤器的使用介绍

过滤器对将要显示的文本先进行特定格式化处理，然后再进行显示。

注意： 过滤器并没有改变原本的数据，只是产生新的对应的数据。

使用过滤器的方式如下：

定义过滤器

有两种定义过滤器的方法：

全局过滤器

Vue.filter(过滤器名称, function(value1[,value2,])){
  // 数据处理逻辑
}

局部过滤器

在 Vue 实例中使用 filter 选项，只能在当前实例范围内可用：

new Vue ({
  filters: {
    过滤器名称: function(value1[,value2,]){
      // 数据处理逻辑
    }
  }
})

使用过滤器

过滤器可以用在两个地方：双大括号 {{}} 和 v-bind 表达式

<!-- 在双花括号中 -->
<div>{{数据属性名称 | 过滤器名称}}</div>
<div>{{数据属性名称 | 过滤器名称(参数值)}}</div>

<!-- 在 v-bind中 -->
<div v-bind:id="数据属性名称 | 过滤器名称"></div>
<div v-bind:id="数据属性名称 | 过滤器名称(参数值)"></div>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h3>过滤器接收多个参数</h3>
        <p>{{content | contentFilter}}</p>
        <h3>过滤器接收多个参数：</h3>
        <p>{{vueScore | add(javaScore, pythonScore)}}</p>
    </div>
    </div>
    <script>
        // 定义全局过滤器
        Vue.filter('contentFilter', function(value) {
            if (!value){
                return '';
            } else {
                return value.toUpperCase().replace('TMD','***').replace('SB', '***');
            }
        });

        let app = new Vue({
            data() {
                return {
                    content: '小伙子，TMD就是个SB',
                    vueScore: 80,
                    javaScore: 95,
                    pythonScore: 90
                }
            },
            // 局部过滤器
            filters: {
                add(num1, num2, num3) {
                    return num1 + num2 + num3;
                }
            }
        }).$mount('#app');
    </script>
</body>
</html>

06-过滤器的使用

过滤器的使用介绍

案例