Vue中过滤器的使用和注意事项

最新推荐文章于 2024-05-20 09:10:07 发布

Sheldon一蓑烟雨任平生

最新推荐文章于 2024-05-20 09:10:07 发布

阅读量777

点赞数 3

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_39055970/article/details/106331482

版权

Vue.js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

vue中过滤器的使用

什么是过滤器
过滤器的使用

什么是过滤器

概念：vue.js允许你自定义过滤器，可用于一些常见的文本格式化。过滤器可以使用在2个地方：mustache插值和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。

过滤器的使用

格式

调用过滤器时的格式：{{name | 过滤器的名称}}

语法

过滤器的定义语法：

Vue.filter('过滤器的名称',function(){});

全局过滤器

1、无参数用法

实例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
</head>

<body>
    <div id="app">
        <p>{{msg | msgFormat}}</p>  
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //定义一个全局过滤器
        Vue.filter('msgFormat', function (msg) {
            return msg.replace(/葡萄/g, '西瓜');
        });
        var app = new Vue({
            el: "#app",
            data: {
                msg: "吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮"
            },
            methods: {

            }
        });
    </script>
</body>

</html>

运行如下：
在这里插入图片描述

2、带参数用法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
</head>

<body>
    <div id="app">
        <p>{{msg | msgFormat('香蕉')}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //定义一个全局过滤器
        Vue.filter('msgFormat', function (msg, arg) {
            return msg.replace(/葡萄/g, arg);
        });
        var app = new Vue({
            el: "#app",
            data: {
                msg: "吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮"
            },
            methods: {

            }
        });
    </script>
</body>

</html>

运行如下：
在这里插入图片描述
当然，也可以带多个参数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
</head>

<body>
    <div id="app">
        <p>{{msg | msgFormat('香蕉','棒棒锤')}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //定义一个全局过滤器
        Vue.filter('msgFormat', function (msg, arg1, arg2) {
            return msg.replace(/葡萄/g, arg1 + arg2);
        });
        var app = new Vue({
            el: "#app",
            data: {
                msg: "吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮"
            },
            methods: {

            }
        });
    </script>
</body>

</html>

运行如下：
在这里插入图片描述

3、多个过滤器嵌套使用

语法：{{msg | 过滤器1 | 过滤器2}}
实例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
</head>

<body>
    <div id="app">
        <p>{{msg | msgFormat('香蕉','棒棒锤') | end}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //定义一个全局过滤器
        Vue.filter('msgFormat', function (msg, arg1, arg2) {
            return msg.replace(/葡萄/g, arg1 + arg2);
        });
        Vue.filter('end', function (msg) {
            return msg + '猪皮怪';
        });
        var app = new Vue({
            el: "#app",
            data: {
                msg: "吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮"
            },
            methods: {

            }
        });
    </script>
</body>

</html>

运行如下：
在这里插入图片描述

4、全局过滤器的好处

在所有的VM实例中都可以使用全局过滤器。

私有过滤器

1、语法

在创建VM对象的时候使用filters创建私有过滤器，私有过滤器也是一个对象，里面可以定义多个过滤器函数。

var app2 = new Vue({
    el: "#app2",
    data: {
        date: new Date()
    },
    methods: {},
    filters: { //定义私有过滤器（局部）
        dateFormat: function (dateStr, pattern = '') {
            console.log(1111);
            var date = new Date(dateStr);
            var y = date.getFullYear();
            var m = (date.getMonth() + 1).toString().padStart(2, 0);
            var d = date.getDate().toString().padStart(2, 0);
            if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
                return y + '-' + m + '-' + d + '（私有过滤器）';
            } else {
                var hh = date.getHours().toString().padStart(2, 0);
                var mm = date.getMinutes().toString().padStart(2, 0);
                var ss = date.getSeconds().toString().padStart(2, 0);
                return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss + '（私有过滤器）';
            }
        }
    }
});

2、就近原则

当私有过滤器和全局过滤器同名时，根据就近原则，vm实例会优先选择私有过滤器。

3、注意点

私有过滤器:filters是复数，一个私有过滤器对象可以声明多个function；
全局过滤器Vue.filter是单数，每次只能一个一个声明。

Sheldon一蓑烟雨任平生

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue中过滤器的使用和注意事项

vue中过滤器的使用什么是过滤器过滤器的使用格式语法全局过滤器1、无参数用法2、带参数用法3、多个过滤器嵌套使用4、全局过滤器的好处私有过滤器1、语法2、就近原则3、注意点什么是过滤器概念：vue.js允许你自定义过滤器，可用于一些常见的文本格式化。过滤器可以使用在2个地方：mustache插值和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。过滤器的使用格式调用过滤器时的格式：{{name | 过滤器的名称}}语法过滤器的定义语法：Vue.filt
复制链接

扫一扫