Vue2基础-Vue2中的过滤器（HTML版）

大脑不能为空

已于 2022-07-06 15:06:00 修改

阅读量343

点赞数 1

分类专栏： Vue2-Vue3全套学习教程文章标签： javascript vue.js 前端开发语言 html

于 2022-07-04 17:25:50 首次发布

本文链接：https://blog.csdn.net/qq_33399435/article/details/125604756

版权

Vue2-Vue3全套学习教程专栏收录该内容

41 篇文章 14 订阅

订阅专栏

一、Vue中的过滤器

1. 过滤器的基本介绍

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：

注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注：

过滤器也可以接收额外参数、多个过滤器也可以串联
并没有改变原本的数据, 是产生新的对应的数据

注意：过滤器在Vue3中已经被弃用，请不要在Vue3中使用过滤器。

2. 格式化时间案例

使用计算属性computed格式化时间

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h3>现在是：{{fmtTime}}</h3>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            time: 1621561377603, //时间戳
        },
        computed: {
            fmtTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        }
    })
</script>

method实现格式化时间

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h3>现在是：{{getFmtTime()}}</h3>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            time: 1621561377603, //时间戳
        },
        methods: {
            getFmtTime() {
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        }
    })
</script>

过滤器实现格式化时间 *

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <!-- 过滤器实现 -->
        <h3>现在是：{{time | timeFormater}}</h3>
        <!-- 过滤器实现（传参） -->
        <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
        <h3 :x="msg | mySlice">尚硅谷</h3>
        <h3>{{msg | dataAddPrefix}}</h3>
    </div>
</body>


<script type="text/javascript">
    //全局过滤器
    Vue.filter('mySlice', function(value) {
        return value.slice(0, 4)
    })
    new Vue({
        el: '#root',
        data: {
        	msg: "Hello",
            time: 1621561377603, //时间戳
        },
        //局部过滤器
        filters: {
            dataAddPrefix(val) {
                return "Nug-" + val;
            },
            // str如果传参则赋值str，否则默认 YYYY年MM月DD日 HH:mm:ss
            timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
                // console.log('@',value)
                return dayjs(value).format(str)
            }
        }
    })
</script>

全局过滤器：全局过滤器可以和局部一起使用。

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h3 :x="msg | mySlice">尚硅谷</h3>
        <h3>{{msg | dataAddPrefix}}</h3>
    </div>
</body>


<script type="text/javascript">
    //全局过滤器
    Vue.filter('mySlice', function(value) {
        return value.slice(0, 4)
    })
    new Vue({
        el: '#root',
        data: {
        	msg: "Hello",
        },
        //局部过滤器
        filters: {
            dataAddPrefix(val) {
                return "Nug-" + val;
            }
        }
    })
</script>