Vue.js中时间过滤器实战：从基本到全局应用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_54693844/article/details/128060219

在这里插入图片描述

文章目录

前言
过滤器

前言

📋前言📋
💝博客：【无聊大侠hello word】💝
✍有一点思考，有一点想法，有一点理性！✍
✍本文由在下【无聊大侠hello word】原创，首发于优快云✍

过滤器

不同方式实现格式化时间：

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="js/vue.js"></script>
    <!-- 使用时间工具库momentjs -->
    <script src="js/momentjs.min.js"></script>
    <title>过滤器</title>
</head>
<body>
    <div id="app">
        <h2>原始时间样式：{{time}}</h2>
        <br>
        <h2>计算属性时间转换：{{formatTime}}</h2>
        <br>
        <h2>方法实现时间转换：{{methodTime()}}</h2>
        <br>
        <h2>过滤器实现时间转换：{{time | timeFormater}}</h2>
        <br>
       <h2>过滤器带样式：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h2>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#app',
        data: {
            time: 1627286601023
        },
        computed: {
            formatTime() {
                return moment(this.time).format('YYYY-MM-DD HH:mm:ss');
            }    
        },
        methods: {
            methodTime() {
                return moment(this.time).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        filters: {
            timeFormater(originTime, formatter='YYYY-MM-DD') {
                return moment(originTime).format(formatter);
            }
        }
    });
</script>
</html>

过滤器使用管道符进行调用。

<h2>过滤器实现时间转换：{{time | timeFormater}}</h2>

过滤器的第一个参数就是管道符左边的内容。

filters: {
    timeFormater(originTime) {
        return moment(originTime).format('YYYY-MM-DD');
    }
}

调用过滤器时可以传入额外的参数，传入的参数被当做过滤器的第二个参数。

<h2>过滤器带样式：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h2>

// 第一个参数为管道符左边内容，第二个参数为调用过滤器时传入的值
timeFormater(originTime, formatter='YYYY-MM-DD') {
    return moment(originTime).format(formatter);
}

过滤器可以串联使用：

<!-- 过滤器串联 -->
<h2>{{time | timeFormater | otherFormater }}</h2>

配置全局过滤器：

在vm中定义的过滤器只对当前vm有效，可以使用Vue.filter配置全局的过滤器

Vue.filter('mySlice', function(value) {
    return value.slice(0, 5);
});

全局过滤器的声明必须在new Vue之前。

过滤器也可以用在v-bind绑定属性上：

<!-- v-bind绑定的属性内容里面也可以使用过滤器 -->
<h2 :x="msg | mySlice">test</h2>

但是不能用在v-mode中。

先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！

07-Vue过滤器

文章目录

前言

过滤器