Loading

Vue过滤器

局部过滤器

<body>
    <div id="app">
        {{message | upperFilter}}<br>
        {{nowTime | dateFormat}}<br>
        {{nowTime | dateFormat('YYYY-MM-DD')}}
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/dayjs.min.js"></script>
<script>
    const vm = new Vue({
        data:{
            message:"abc",
            nowTime:(new Date().getTime())
        },
        filters:{
            upperFilter(val){
                return val.toUpperCase();
            },
            dateFormat(value,str = "YYYY-MM-DD hh:mm:ss"){  //str参数默认值为YYYY-MM-DD hh:mm:ss如果传入其他参数则代替
                return dayjs(value).format(str);
            }
        }
    })
    vm.$mount("#app");
</script>
</html>

全局过滤器

<body>
    <div id="app">
        {{message | upperFilter}}<br>
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/dayjs.min.js"></script>
<script>
    Vue.filter("upperFilter",function(val){
        return val.toUpperCase();
    })
    const vm = new Vue({
        data:{
            message:"abc",
            nowTime:(new Date().getTime())
        }

    })
    vm.$mount("#app");
</script>

Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js

posted @ 2021-10-06 10:24  IamHzc  阅读(31)  评论(0)  编辑  收藏  举报