过滤器

最新推荐文章于 2022-08-17 15:40:37 发布

掘金开发者

最新推荐文章于 2022-08-17 15:40:37 发布

阅读量129

点赞数

文章标签：过滤器

本文链接：https://blog.csdn.net/weixin_43554610/article/details/101100060

版权

过滤器调用的格式
{{name | 过滤器名称}}
//过滤器语法
function的第一个参数是固定的，是管道符前边的数据
Vue.filter('过滤器名称',function(data){
	return data+ '123
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id = "app">
        {{msg | msgFormat}}
    </div>
    <script>
        Vue.filter('msgFormat',function(data){
            return data.replace(/单纯/g,'邪恶')
        })
        new Vue({
            el: '#app',
            data: {
                msg: '单纯,单纯'
            }
        })
    
    
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id = "app">
        {{msg | msgFormat('傻逼')}}
    </div>
    <script>
        // 给过滤器传参
        Vue.filter('msgFormat',function(data,sb){
            return data.replace(/单纯/g,sb)
        })
        new Vue({
            el: '#app',
            data: {
                msg: '单纯,单纯'
            }
        })
    
    
    </script>
</body>
</html>

时间格式化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id = "app">
        {{msg | dataFormat}}
    </div>
    <script>
        // 进行时间格式化
        Vue.filter('dataFormat',function(data){
            // 根据给定的字符串得到给定的时间
            var dt = new Date(data)
            // 拼接处yyyy-mm-dd
            // 年
            var y = dt.getFullYear()
            // 月
            var m = dt.getMonth()+1
            // 日
            var d = dt.getDate()

            //return y + '-' + m + '-' + d  // 结果 
            // return `yyyy-mm-dd`
            return `${y}-${m}-${d}`
        })
        new Vue({
            el: '#app',
            data: {
                msg: new Date()
            }
        })
    
    
    </script>
</body>
</html>

最全日期

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 让用户传递字符串 yyyy-mm-dd-->
        <!-- {{msg | dataFormat('yyyy-mm-dd')}} -->
        {{msg | dataFormat}}
    </div>
    <script>
        // 进行时间格式化
        // 让用户传递字符串然后接收
        // 不传参用形参默认值
        Vue.filter('dataFormat', function (data, pattern = "") {
            // 根据给定的字符串得到给定的时间
            var dt = new Date(data)
            // 拼接处yyyy-mm-dd
            // 年
            var y = dt.getFullYear()
            // 月
            var m = dt.getMonth() + 1
            // 日
            var d = dt.getDate()

            //return y + '-' + m + '-' + d  // 结果 
            // return `yyyy-mm-dd`

            if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                // 只获取年月日
                return `${y}-${m}-${d}`

            } else {
                // 最全日期
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
        })
        new Vue({
            el: '#app',
            data: {
                msg: new Date()
            }
        })
    </script>
</body>

</html>

私有过滤器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 让用户传递字符串 yyyy-mm-dd-->
        <!-- {{msg | dataFormat('yyyy-mm-dd')}} -->
        {{msg | dataFormat}}
    </div>
    <script>

        new Vue({
            el: '#app',
            data: {
                msg: new Date()
            },
            // 私有过滤器
            filters: { //过滤器名称  处理函数
                dataFormat: function (data, pattern = '') {
                    // 根据给定的字符串得到给定的时间
                    var dt = new Date(data)
                    // 拼接处yyyy-mm-dd
                    // 年
                    var y = dt.getFullYear()
                    // 月
                    // 用字符串的padStart()方法
                    var m = (dt.getMonth() + 1).toString().padStart(2,'0')
                    // 日
                    var d = (dt.getDate()).toString().padStart(2,'0')

                    //return y + '-' + m + '-' + d  // 结果 
                    // return `yyyy-mm-dd`

                    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        // 只获取年月日
                        return `${y}-${m}-${d}`

                    } else {
                        // 最全日期
                        var hh = (dt.getHours()).toString().padStart(2,'0')
                        var mm = (dt.getMinutes()).toString().padStart(2,'0')
                        var ss = (dt.getSeconds()).toString().padStart(2,'0')
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                    }

                }

            }
        })
    </script>
</body>

</html>

掘金开发者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
过滤器

过滤器调用的格式{{name | 过滤器名称}}//过滤器语法function的第一个参数是固定的，是管道符前边的数据Vue.filter(‘过滤器名称’,function(data){return data+ '123})<!DOCTYPE html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫