13 过滤器

最新推荐文章于 2020-06-04 13:47:03 发布

Civitasv

最新推荐文章于 2020-06-04 13:47:03 发布

阅读量79

点赞数

分类专栏： Vue 文章标签：过滤器 vue filter

本文链接：https://blog.csdn.net/qq_40996400/article/details/104364102

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

过滤器用于过滤模型数据，在显示之前进行数据处理和筛选。

语法：{{data | filter1(参数) |filter2(参数)}

在Vue 2.x中，内置过滤器已经不存在了，需要我们自定义过滤器或者使用第三方工具库(如loadash、date-fns日期格式化、accounting.js货币格式化)。

**应用：**过滤器可以应用于mustache和v-bind之中。

一全局过滤器

Vue.filter("filtername",function(){})

这种方式定义了一个全局过滤器。

全局过滤器可以传递参数，但需要注意第一个参数为应用该过滤器的值，即{{data | filter1(arg)}中的data，而传递的arg参数为第二个参数，实际定义过滤器时应定义为Vue.filter("filtername",function(){data,arg})。

使用全局过滤器示例如下：

<html>
<title>自定义过滤器</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="app">
        <p>{{msg | filterName}}</p>
        <p>{{msg | filterName2("123")}}</p>
    </div>

    <script>
        // 全局过滤器1
        Vue.filter("filterName", function (msg) {
            return msg + "123"
        })

        // 全局过滤器2
        Vue.filter("filterName2", function (msg, data) {
            return msg + data;
        })

        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hello world"
            },
            methods: {

            }
        });


    </script>
</body>

</html>

日期格式化案例(使用模板字符串)

<html>
<title>日期格式化</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="app">
        <p>{{dateTime | dateFormat}}</p>
    </div>

    <script>
        // 全局过滤器
        Vue.filter("dateFormat", function (dateTime) {
            var dt = new Date(dateTime);
            var y = dt.getUTCFullYear();
            var m = dt.getMonth() + 1;
            var d = dt.getDate();

            // 模板字符串
            return `${y}-${m}-${d}`
        })

        var vm = new Vue({
            el: "#app",
            data: {
                dateTime: "2017-02-02"
            },
            methods: {

            }
        });


    </script>
</body>

</html>

在该案例中使用了模板字符串进行日期格式的输出。

模板字符串是es6新特性，用反引号包括的字符串解析为模板字符串，十分方便。

二私有过滤器

全局过滤器可以应用与所有被Vue控制下的Dom元素，私有过滤器仅应用于绑定于当前Vue实例的Dom元素。私有过滤器使用filters标识，示例如下：

<html>
<title>私有过滤器</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="app">
        <p>{{dateTime | dateFormat}}</p>
    </div>

    <script>

        var vm = new Vue({
            el: "#app",
            data: {
                dateTime: "2017-02-02"
            },
            methods: {

            },
            // 私有过滤器
            filters: {
                dateFormat(dateTime) {
                    var dt = new Date(dateTime);
                    var y = dt.getUTCFullYear();
                    var m = dt.getMonth() + 1;
                    var d = dt.getDate();

                    // 模板字符串
                    return `${y}-${m}-${d}`
                }
            }
        });


    </script>
</body>

</html>