基本用法

过滤器的目的就是通过简单的语法，来实现对原有数据的格式化输出。如果你比较较真的话，其实普通函数也能实现，只需要在需要格式化的地方调用函数也行。用法比较简单，可以用在{{}}表达式结尾或者v-bind结尾。

[loginview]

<template>
    <div>
        原始数据
        <p>{{date}}</p>
        使用过滤器格式化
        <p>{{date | format}}</p>
        <p>{{date | format3}}</p>
        使用函数格式化
        <p>{{format2(date)}}</p>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                date: new Date()
            }
        },
        filters: {
            format: function (value) {
                if (!value) return ''
                value = value.toLocaleDateString()
                return value
            },
            format3: function (value) {
                if (!value) return ''
                value = value.toLocaleString()
                return value
            },
        },
        methods: {
            format2(value) {
                if (!value) return ''
                value = value.toLocaleDateString()
                return value
            }
        }

    }
</script>

以上代码演示了通过不同的方式实现的数据格式化,多个过滤器的定义可以用逗号隔开。最终页面输出:

过滤器的串联用法

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。
代码：

<template>
    <div>
        原始数据
        <p>{{num}}</p>
        使用过滤器实现对num的加1
        <p>{{num | add1}}</p>
        <p>{{num | add1 | add1 | add2}}</p>

    </div>
</template>


<script>

    export default {
        data() {
            return {
                num: 0
            }
        },
        filters: {
            add1: function (value) {
                return value+1
            },
            add2: function (value) {
                return value+2
            },
        }
    }
</script>

代码演示了过滤的串联，不论是相同的过滤器还是不同的过滤器都可以串联使用。
最终页面输出:

定义全局的过滤器

main.js中定义我们的全局过滤器。如果你定义的过滤器数量很多，最好单独使用一个js文件来定义，然后引入到main.js中。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//定义全局过滤器
Vue.filter('add1', function (value) {
    return value+1
})

new Vue({
  render: h => h(App),
}).$mount('#app')

修改组件内的代码如下：

<template>
    <div>
        原始数据
        <p>{{num}}</p>
        使用过滤器实现对num的加1
        <p>{{num | add1}}</p>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                num: 0
            }
        }
    }
</script>

最终页面如期输出：

过滤器多参数传递

过滤器是 JavaScript 函数，因此可以接收参数，只是第一个参数是默认传递的。我们依然通过代码来演示下：

<template>
    <div>
        原始数据
        <p>{{num}}</p>
        使用过滤器实现对num的加1
        <p>{{num | add1(true)}}</p>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                num: 0
            }
        },
        filters:{
            add1:function (value,addDouble) {
                if (addDouble) {
                    return value + 2
                }
                return value + 1
            }
        }
    }
</script>

现在我们事先的过滤器可以通过条件来切换分支逻辑了。

最终页面如期输出：

file

[/loginview]