【Vue】过滤器

文章目录

  • 前言
  • 一、全局定义
  • 二、局部定义
  • 三、padStart()、padEnd()


前言

过滤器:可被用作一些常见的文本格式化
用到的地方:插值表达式,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)
    })

你可能感兴趣的:(es6,javascript,vue.js)