<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="msg" />
        <div>{{msg|upper}}</div>
        <div>{{msg|upper|lower}}</div>
        <div :abc='msg|upper'>测试数据</div>
        <div>{{date|format('yyyy-MM-dd hh:mm:ss')}}</div>
    </div>
</body>
<script type="text/javascript">
    // Vue.filter('upper', function(val) {
    //     return val.charAt(0).toUpperCase() + val.slice(1);
    // })
    Vue.filter('lower', function(val) {
        return val.charAt(0).toLowerCase() + val.slice(1);
    })

    // Vue.filter("format", function(value, arg) {
    //     if (arg == "yyyy-MM-dd") {
    //         var ret = '';
    //         ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
    //     }
    //     return ret;
    // })

    Vue.filter("format", function(value, arg) {
        function dateFormat(date, format) {
            if (typeof date == "string") {
                var mts = date.match(/(\/Date\((\d+)\)\/)/);
                if (mts && mts.length >= 3) {
                    date = parseInt(mts[2]);
                }
            }

            date = new Date(date);
            if (!date || date.toUTCString() == "Invalid Date") {
                return "";
            }
            var map = {
                "M": date.getMonth() + 1, //月份
                "d": date.getDate(), //日
                "h": date.getHours(), //小时
                "m": date.getMinutes(), //分钟
                "s": date.getSeconds(), //秒
                "q": Math.floor((date.getMonth() + 3) / 3), //季度
                "S": date.getMilliseconds() //毫秒

            };

            format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                var v = map[t];
                if (v !== undefined) {
                    if (all.length > 1) {
                        v = '0' + v;
                        v = v.substr(v.length - 2);
                    }
                    return v;
                } else if (t == 'y') {
                    return (date.getFullYear() + '').substr(4 - all.length);
                }
                return all;
            });
            return format;

        }
        return dateFormat(value, arg);
    })

    var vm = new Vue({
        el: '#app',
        data: {
            msg: '',
            date: new Date(),

        },
        methods: {

        },
        filters: {
            upper: function(val) {
                return val.charAt(0).toUpperCase() + val.slice(1);
            }
        }
    })
</script>

</html>

<!-- 
    1.过滤器的作用是什么？

    格式数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

    2.自定义过滤器
    Vue.filter('过滤器名称',function(value){
        //过滤器业务逻辑
    })

    3.过滤器的使用
    <div>{{msg | upper}}</div>
    <div>{{msg|upper|lower}}</div>
    <div v-bind:id="id|formatId"></div>

    4.局部过滤器
    filters:{
        capitalize:function(){

        }
    }

    5.带参数的过滤器
    Vue.filter('format',function(value,arg1){
        //value就是过滤器传递过来的参数
    })


    6.过滤器的使用
    <div>{{date|format('yyyy-MM-dd')}}</div>
-->