ES6过滤器

最新推荐文章于 2024-04-21 18:14:50 发布

js之爷

最新推荐文章于 2024-04-21 18:14:50 发布

阅读量235

点赞数

文章标签： es6 javascript vue.js

本文链接：https://blog.csdn.net/wangmingzhi111/article/details/130690318

版权

文章目录

过滤器：可被用作一些常见的文本格式化
用到的地方：插值表达式，v-bind表达式
由管道符连接 ‘|’

一、全局定义

第一个参数过滤器的名字
第二个参数回调函数 function（data,format）{}
data 管道符前面的数据
format: 过滤器传过来的参数

<head>
    <script src="../vue-2.4.0.js"></script>
</head>
<body>
    <div id='app'>
        {{msg}}
        {{msg | setMsg | setMsg(111)}}
    </div>
    <script>
        // 第一个参数 过滤器的名字 
        // 第二个参数 回调函数（data,format）
        // data 管道符前面的数据
        // format: 过滤器传过来的参数
        Vue.filter('setMsg', function (data, format) {
            // console.log(data);  // 百度一下，你就知道  百度**，你***
            // console.log(format);  // undefined  111
            return data.replace('一下', '**').replace('就知道', '***')
        })
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '百度一下，你就知道'
            },
            methods: {
            }
        })
    </script>
</body>

二、局部定义

<head>
    <script src="../vue-2.4.0.js"></script>
</head>
<body>
    <div id='app'>
        <div id="aaa">
            {{msg}}
            {{msg | setMag(111111)}}
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            filters: {
                setMag(data, format) {
                    // console.log(data); // 百度一下，你就知道
                    // console.log(format);  // 111111
                    return data.replace('一下', '**').replace('就知道', '***')
                }
            }
        })
        const v = new Vue({
            el: '#aaa',
            data: {
                msg: '百度一下，你就知道'
            },
            methods: {
            }
        })
    </script>
</body>

三、padStart（）、padEnd（）

padStart（）字符串提供的方法，调用的地方是字符串，有两个参数，第一个参数是显示的位数，第二个参数是位数不足时在其前面补充的内容；
padEnd（）字符串提供的方法，调用的地方是字符串，有两个参数，第一个参数是显示的位数，第二个参数是位数不足时在其后面补充的内容。

Vue.filter('setMsg', function (data, format) {
        var date = new Date()
        var y = date.getFullYear()
        var m = (date.getMonth() + 1).toString().padStart(2, '0')
        var d = date.getDate().toString().padStart(2, '0')
        var h = date.getHours().toString().padStart(2, '0')
        var min = date.getMinutes().toString().padStart(2, '0')
        var s = date.getSeconds().toString().padStart(2, '0')
        // console.log(y, m, d, h, min, s);
        return format.replace('YYYY', y).replace('MM', m).replace('DD', d).replace('HH', h).replace('II', min).replace('SS', s)
    })