vue_过滤器：对要显示的数据进行特定格式化后再显示

最新推荐文章于 2022-05-18 10:15:52 发布

aof26372

最新推荐文章于 2022-05-18 10:15:52 发布

阅读量262

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tianxiaxuange/p/10386839.html

版权

过滤器

对要显示的数据进行特定格式化后再显示

并未改变原本的数据，可是产生新的对应的数据

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>10_Vue_filter</title>
        <link rel="stylesheet" type="text/css" href="./css/index.css">
    </head>
    <body>
        <div id="test">
            <p>{{curTime | timeFormat}}</p>
        </div>
        <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
        <script src="./js/vue.js"></script>
        <script>
            Vue.filter("timeFormat", function (value, timeType="YYYY-MM-DD HH:mm:ss") {
                let newValue = moment(value).format(timeType);
                return (newValue === "Invalid date")?"":newValue;
            });
            new Vue({
                el: "#test",
                data:{
                    curTime: ""
                },
                mounted(){
                    setInterval(()=>{
                        this.curTime = Date.now();
                    }, 1000)
                }
            });
        </script>
    </body>
</html>