什么是过滤器?

对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。

示例

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>江河三千里</title>
    <script type='text/javascript' src='http://ljy0427.online/js/vue.js'></script>
    <script type='text/javascript' src='http://ljy0427.online/js/dayjs.js'></script>
</head>

<body>
    <div id='root'>
        <h1>现在是:{{time}}</h1>
        <!-- 计算属性实现 -->
        <h3>现在是:{{fmtTime}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是:{{time|timeFormater}}</h3>
    </div>
</body>
<script type='text/javascript'>
    Vue.config.productionTip = false
    var vm = new Vue({
        el: '#root',
        data: {
            time: Date.now()
        },
        computed: {
            fmtTime() {
                return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")
            }
        },
        filters: {
            timeFormater(res) {
                return dayjs(res).format("YYYY-MM-DD HH:mm:ss")
            }
        }

    }
    );
    console.log(Date.now())
</script>

</html>
可以看到这里多了这个filters关键字,和data,computed这些都属于Vue中的配置对象

并且在配置这个过滤器的时候,实际上和函数一样,这里就可以看到timeFormater中的res对应的就是time这个属性。
最后修改:2022 年 05 月 07 日