vue_過濾器：對要顯示的數據進行特定格式化後再顯示

時間 2019-11-08

標籤 vue 過濾器顯示數據進行特定格式化简体版

原文原文鏈接

過濾器css

對要顯示的數據進行特定格式化後再顯示html

並未改變本來的數據，但是產生新的對應的數據vue

<!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>

相關標籤/搜索

vue_過濾器： 對要顯示的數據進行特定格式化後再顯示

vue_過濾器：對要顯示的數據進行特定格式化後再顯示