-30 过滤器

sanda_nd

已于 2022-10-04 09:52:36 修改

阅读量75

点赞数

分类专栏： Vue2 文章标签：前端 vue.js vue2 javascript

于 2022-10-04 09:46:06 首次发布

本文链接：https://blog.csdn.net/sanda_nd/article/details/127158794

版权

Vue2 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

过滤器：

定义：对要显示的数据进行特定格式化后再显示（过滤器可用可不用，可以被计算属性或者方法代替）

语法：

- 注册过滤器

Vue.filter() 或者new Vue(filters:{})

- 使用过滤器{{xxx | 过滤器名}}

备注：

- 过滤器可以接收额外参数，多个过滤器可以串联

- 没有改变原本的数据，而是产生新的数据

实现一个功能：显示格式化后的时间

所用库：dayjs，一个轻量的处理时间和日期的javaScript库（可通过该网站BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务下载）

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="./单文件组件/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.4/dayjs.min.js"></script>
    <!-- 
      过滤器:
        定义：对要显示的数据进行特定格式化后再显示
        语法：
            - 注册过滤器
                Vue.filter() 或者new Vue(filters:{})
            - 使用过滤器{{xxx | 过滤器名}}
        备注：
            - 过滤器可以接收额外参数，多个过滤器可以串联
            - 没有改变原本的数据，而是产生新的数据
         
     -->
</head>

<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h3>现在是{{fmtTime}}</h3>
        <!-- methods 实现 -->
        <h3>现在是{{getTime()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是{{time | timeFilter('YYYY-MM-DD')}}</h3>
        <!-- 只要前四位 -->
        <!-- 串联 -->
        <h3>现在是{{time | timeFilter('YYYY-MM-DD') | mySlice}} </h3>
    </div>

    <div id="root2">
        <h2>欢迎{{name | mySlice}}</h2>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    // 定义全局过滤器
    Vue.filter('mySlice', function (value) {
        return value.slice(0, 4)
    })
    new Vue({
        el: '#root',
        data: {
            time: new Date(), // 时间戳
        },
        computed: {
            fmtTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            getTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            },
        },
        // 局部过滤器
        filters: {
            timeFilter(value, str = 'YYYY-MM-DD HH:mm:ss') {
                return dayjs(value).format(str)
            },
            mySlice(value) {
                return value.slice(0, 4)
            }
        }

    })
    new Vue({
        el: '#root2',
        data: {
            name: '小明ssdsd'
        }
    })




</script>

</html>

最终效果：