Vue 过滤器

在 {{}} 插值的尾部添加一个管道符号”|“，对数据进行过滤，经常用于格式化文本，如：字母全部大写，货币千位使用逗号分隔等。
过滤的规则是自定义的，通过在 Vue 实例添加 filters 选项来设置的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{ date | formatDate }}
</div>

<script>
    //在月份、日期、小时等，小于10时前面补0
    var padDate = function (value) {
        return value < 10 ? '0' + value : value
    }

    var app = new Vue({
        el: '#app',
        data: {
            date: new Date()
        },
        filters: {
            formatDate: function (value) {//这里的value 就是需要过滤的数据
                var date = new Date(value)
                var year = date.getFullYear()
                var month = padDate(date.getMonth() + 1)
                var day = padDate(date.getDate())
                var hours = padDate(date.getHours())
                var minutes = padDate(date.getMinutes())
                var seconds = padDate(date.getSeconds())
                //将整理好的数据返回出去
                return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
            }
        },
        mounted: function () {
            var _this = this//声明一个变量指向Vue实例this，保证作用域一致
            this.timer = setInterval(function () {
                _this.date = new Date()//修改数据date
            }, 1000)
        },
        beforeDestroy: function () {
            if (this.timer) {
                clearInterval(this.timer)//在Vue实例销毁前，清除定时器
            }
        }
    })
</script>
</body>
</html>