vue中过滤器的使用-案例字母大小写转换及格式化时间

过滤器概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；在双花括号中{{ message | change }}在 v-bind 中<div v-bind:id="rawId | change"></div>私

面对疾风ba

2802人浏览 · 2021-02-24 14:54:15

面对疾风ba · 2021-02-24 14:54:15 发布

过滤器

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

在双花括号中
{{ message | change }}

在 v-bind 中
<div v-bind:id="rawId | change"></div>

私有过滤器

小案例使用过滤器把小写字母全部转换为大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" v-model="content">
            <p>{{ content | change }}</p>
            <!-- 在开发者工具中查看是否转换 -->
            <p v-bind:words="content | change "></p>
        </div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
               content:'',
            },
            methods:{},
            // 私有过滤气的使用
            filters:{
                change:function (content) {
                    return content.toUpperCase() + '---私有过滤器转换'
                }
            }
        })
    </script>
    
</body>
</html>

全局过滤器

小案例使用全局过滤器把小写字母全部转换为大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" v-model="content">
            <p>{{ content | change }}</p>
            <!-- 在开发者工具中查看是否转换 -->
            <p v-bind:words="content | change "></p>
        </div>
    </div>
    <script>
    	//全局过滤器的使用
        Vue.filter('change', function (content) {
            return content.toUpperCase() + '---全局过滤器转换'
        });
        var app = new Vue({
            el:'#app',
            data:{
               content:'',
            },
            methods:{}
        })
    </script>
</body>
</html>

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

过滤器函数总接收表达式的值作为第一个参数。在上述例子中，change 过滤器函数将会收到 content 的值作为第一个参数。

过滤器可以串联：

{{ content | changeA | changeB }}

过滤器是 JavaScript 函数，因此可以接收参数：

{{ content | changeA(‘arg1’, arg2) }}

这里，changeA 被定义为接收三个参数的过滤器函数。其中 content 的值作为第一个参数，普通字符串 arg1作为第二个参数，表达式 arg2的值作为第三个参数。

案例：使用过滤器来格式化时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <p>未格式化时间</p>
            <h3>{{ time }}</h3>
            <hr>
            <p>使用过滤器格式化时间</p>
            <h3>{{ time | timeFormt }}</h3>
        </div>
    </div>
    <script>

        var app = new Vue({
            el:'#app',
            data:{
              time:new Date()
            },
            methods:{},
            filters:{
                timeFormt:function (time,pattern='') {

                    var date = new Date(time)

                    var y = date.getFullYear()
                    var m = (date.getMonth() + 1).toString().padStart(2,'0')
                    var d = date.getDate().toString().padStart(2,'0')

                    if (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} --`
                    }
                }
            }
        })
    </script>
</body>
</html>