过滤器

1、案例1

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>过滤器</title>
</head>

<body>
    <div id="app">
        <p>原格式:{{date}}</p>
        <!-- dateString指定自定义过滤器 -->
        <p>年月日时分秒:{{date | dateString}}</p>
        <p>年月日:{{date | dateString('YYYY-MM-DD')}}</p>
        <p>时分秒:{{date | dateString('HH:mm:ss')}}</p>
        <p>年月日时分秒(ES6语法形参默认值写法):{{date | dateString2}}</p>
        <p>年月日(ES6语法形参默认值写法):{{date | dateString2('YYYY-MM-DD')}}</p>
    </div>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js" type="text/javascript"></script>
    <script>
        //自定义过滤器，必须写在Vue实例前
        Vue.filter("dateString", function (value, format) {
            //若有传format参数则按format格式进行格式化
            //若没有传format参数则按YYYY-MM-DD HH:mm:ss格式进行格式化
            return moment(value).format(format || "YYYY-MM-DD HH:mm:ss");
        });
        //format="YYYY-MM-DD HH:mm:ss"是ES6形参默认值写法
        //若format有传则使用传过来的值，format没传则使用默认值
        Vue.filter("dateString2", function (value, format = "YYYY-MM-DD HH:mm:ss") {
            return moment(value).format(format);
        });
        const vm = new Vue({
            el: "#app",
            data: {
                date: new Date()
            }
        });
    </script>
</body>

</html>

 

posted @ 2020-03-14 12:45  牛牛的自留地  阅读(96)  评论(0)  编辑  收藏  举报