6 过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

在双花括号中
{{ message | capitalize }}
在 v-bind 中
<div v-bind:id="rawId | formatId"></div>

过滤器实例——文本内容截取和日期时间格式化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue.js-过滤器练习-字符串的截取和时间格式的转换</title>
        <!-- 通过CDN引入Vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h3>处理前</h3>
            <h4>{{message}}</h4>
            <h4>{{time}}</h4>
            <hr>
            <h3>处理后</h3>
            <h4>{{message | handleMessage}}...</h4>
            <h4>{{ time | formatDate }}</h4>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    message: '江苏省南京市仙林大学城羊山北路1号南京工业职业技术学院计算机与软件学院软件1721班',
                    time: new Date()
                },
                methods: {},
                computed: {
                    handleMessage: function() {
                        return this.message.substring(0, 11);
                    }
                },
                filters: {
                    formatDate: function(date) {
                        var d = new Date(date);
                        var year = d.getFullYear();
                        var month = d.getMonth() + 1;
                        var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
                        var hour = d.getHours() < 10 ? '0' + d.getHours() : '' + d.getHours();
                        var minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : '' + d.getMinutes();
                        var seconds = d.getSeconds() < 10 ? '0' + d.getSeconds() : '' + d.getSeconds();
                        return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
                    },
                    handleMessage: function(msg) {
                        return msg.substring(0, 11);
                    }
                }
            })
        </script>
    </body>
</html>

image.png