Vue2基础篇-18-过滤器

最新推荐文章于 2024-01-05 10:00:00 发布

Alan0517

最新推荐文章于 2024-01-05 10:00:00 发布

阅读量96

点赞数

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/Hmj050117/article/details/128224831

版权

Vue2+Ts-基础篇专栏收录该内容

40 篇文章 3 订阅

订阅专栏

1. demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> 过滤器</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>

<body>
    <div id="root">

        <h2>格式化之后的时间为</h2>

        <!-- 计算属性实现 -->
        <h2>{{fmatTime}}</h2>


        <!-- 方法实现 -->
        <h2>{{getFormatTime()}}</h2>

        <!-- 过滤器实现 
        
            对谁过滤,就写谁，然后后面 接管道命名 | 然后 是过滤器方法，过滤器方法其实也是函数，但是它可以省略（）不写
            过滤器的第一个参数是过滤器之前的参数，小括号写不写无所谓，如果你想加入其他入参，就需要加上小括号，然后写参数
        -->
        <h2>{{time | filterTime}}</h2>
        <!-- 过滤器传参 -->
        <h2>{{time | filterTime2("YYYY-MM-DD HH:mm:ss") }}</h2>
        <!-- 过滤器多个链式调用 -->
        <h2>{{time | filterTime2("YYYY-MM-DD HH:mm:ss") | mySlice}}</h2>
    </div>


    <script text="text/javascript">
        // 全局过滤器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })

        new Vue({
            el: "#root",
            data: {
                time: 1660463012000
            },
            computed: {
                fmatTime() {
                    return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
                }
            },
            methods: {
                getFormatTime() {
                    return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
                }
            },
            // 局部过滤器
            filters: {
                filterTime(value) {
                    return dayjs(value).format("YYYY年MM月DD日 HH:mm:ss")
                },
                // 如果str参数没给，则默认值就是 "YYYY年MM月DD日 HH:mm:ss"
                filterTime2(value, str = "YYYY年MM月DD日 HH:mm:ss") {
                    return dayjs(value).format(str)
                },
                // mySlice(value) {
                //     return value.slice(0, 4)
                // }
            }
        })
    </script>
</body>
</html>

2. 小总结

   <!-- 

   过滤器：

   定义：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
   语法：
       1. 注册过滤器： Vue.filter(name,callback) 或 new Vue{filters:{}}
       2. 使用过滤器： {{ xxx | 过滤器名 }} 或 v-bind: 属性=" xxx | 过滤器名 "
   备注：
       1. 过滤器也可以接收额外参数，多个过滤器也可以串联
       2. 并没有改变原本的数据，是产生新的对应的数据
 -->