07-Vue过滤器

淩亂°似流年 2024-05-03 14:34 6阅读 0赞

![在这里插入图片描述][e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]

#### 文章目录 ####

*  前言
 *  过滤器

## 前言 ##

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

## 过滤器 ##

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

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<script src="js/vue.js"></script>
        
        <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`绑定属性上：

<h2 :x="msg | mySlice">test</h2>

但是不能用在`v-mode`中。

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

[e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/d4b199e9b18146eabc39e1377aa3c783.gif