Vue过滤器

        过滤器:
            定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
            语法:
                1. 注册过滤器:Vue,filter(name,callback),或new Vue{filters:{}}
                2.使用过滤器:{{xxx | 过滤器名}} 或v-bind:属性 = "xxx | 过滤器名"
            备注:
                1. 过滤器也可以接收额外参数,多个过滤器也可以串联
                2. 并没有改变原有的数据,是产生新的对应的数据
//需要导入的依赖
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.3/dayjs.min.js"></script>
	
	
	<body>
    <div id="root">
        <h1>现在的时间是:{{data | timeFormat}}</h1>
        <h1>现在是{{data | timeFormat | splic}} 年</h1>
    </div>
    <script>
        Vue.config.productionTip = false;
        //这是全局配置过滤器
        Vue.filter("splic", function (value) {
            return value.slice(0, 4);
        })
        new Vue({
            el: "#root",
            data: {
                time: 1658060536201
            },
            //这是局部配置
            filters: {
                timeFormat(value) {
                    //引入时间格式化器(dayjs)来格式化时间
                    return dayjs(value).format("YYYY-MM-DD HH:mm:ss")
                },
                // splic(value) {
                //     return value.slice(0, 4);
                // }
            }
        })
    </script>
</body>
posted @ 2022-07-17 20:34  小罗要有出息  阅读(12)  评论(0编辑  收藏  举报