14.过滤器

最新推荐文章于 2024-08-29 09:47:43 发布

M丶GentleMan

最新推荐文章于 2024-08-29 09:47:43 发布

阅读量79

点赞数

分类专栏： Vue学习文章标签：前端 javascript es6

本文链接：https://blog.csdn.net/ma628991/article/details/121483723

版权

Vue学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js项目中使用过滤器来格式化时间和处理数据，包括自定义日期格式、参数传递以及全局过滤器的使用。通过实例展示了如何创建computed和methods计算属性，并结合时间戳和Day.js库实现不同场景的时间显示。

摘要由CSDN通过智能技术生成

<!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">
    <title>Document</title>
    <!-- 创建新的页面，记得引入。 -->
    <script type='text/javascript' src="../JS/vue.js"></script>
    <!-- bootcdn，引用的dayjs -->
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>

</head>

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

    <div id="root">
        <h2>现在的时间是：</h2>
        <h3>computed计算属性表达：{{fmtTime}}</h3>
        <!-- getFmtTime()后面一定要跟括号的 -->
        <h3>methods表达：{{getFmtTime()}}</h3>
        <!-- 此时的time是data中的time -->
        <h3>过滤器表达：{{time | timeForMater}}</h3>
        <h3>过滤器表达（传参）：{{time | timeForMater('YYYY-MM-DD')}}</h3>
        <h3>过滤器表达（截取前4位）：{{time | timeForMater('YYYY-MM-DD' ) | mySlice}} </h3>
        <hr>
    </div>

    <div id='demo'>
        <h2>filters改成全局变量</h2>
        <h3>过滤器表达（截取前4位）：{{num | mySlice}} </h3>
    </div>

</body>
<script>
    Vue.config.productionTip = false;
    // Vue.filter('mySlice', function (value) {
    //     return value.slice(0, 4)
    // })
    Vue.filter('mySlice', function (value) {
        return value.slice(0, 4)
    })

    new Vue({
        el: '#root',
        data: {
            // 时间戳，记得不能加引号，切记！
            time: 1621561377603,
        },
        computed: {
            fmtTime() {
                // dayjs后面不跟time，显示的是当前的时间。
                // return dayjs().format('YYYY-MM-DD HH:mm:ss')
                // 加完time中的时间戳，显示的是时间戳转化后的时间
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            getFmtTime() {
                // 注意事项和computed一致
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        filters: {
            // ！注意：filters局部变量

            // 不跟val就是显示当前的时间
            // timeForMater() {
            //     return dayjs().format('YYYY-MM-DD HH:mm:ss')
            // }

            // timeForMater(val) {
            //     return dayjs(val).format(str)
            // }

            // 现在是保留年月日，上面传参给的格式，str = 'YYYY- MM - DD HH: mm: ss'要加的，不然会变格式
            timeForMater(val, str = 'YYYY- MM - DD HH: mm: ss') {
                return dayjs(val).format(str)
            },
            // 截取年月日的前四位
            // 局部变量。
            // mySlice(val) {
            //     return val.slice(0, 4)
            // }

        }
    })
    new Vue({
        el: '#demo',
        data: {
            num: '123456'
        }
    })
</script>


</html>