提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue学习之--------Vue中过滤器(filters)的使用（代码实现）（2022/7/18）

Vue学习代码 实现 2022 18 过滤器 --------
2023-09-14 09:07:25 时间

1、过滤器

1.1 概念

过滤器：

  • 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
  • 语法：
    1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
    2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

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

1.2 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>

</head>

<body>
    <div id="App">
        <h1>格式化后的时间</h1>
        <h2>现在是（计算属性实现）:{{formatTime}}</h2><br />
        <h2>现在是（method实现）:{{getformatTime()}}</h2><br />
        <h2>现在是（过滤器实现）:{{time | timeFormater}}</h2><br />
        <h2>现在是（过滤器实现同时传参）:{{time | timeFormater('YYYY-MM-DD')}}</h2><br />
        <h2>现在是（过滤器实现同时传参（多个过滤器的联合使用））:{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h2><br />


    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示
        //全局过滤器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })

        //创建Vue实例
        new Vue({
            el: '#App',
            data: {
                value: "Vue",
                time: 1658153149000, //时间戳

            },
            methods: {
                getformatTime() {
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                }
            },
            computed: {
                formatTime() {
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                }

            },
            filters: {
                timeFormater(value, str = "YYYY年MM月DD日 HH:mm:ss") {
                    return dayjs(value).format(str)
                }
            }
        })
    </script>

</body>

</html>

1.3 测试效果

在这里插入图片描述
在这里插入图片描述

相关文章