Vue:（十六）过滤器

最新推荐文章于 2023-07-05 14:29:57 发布

置顶空谷有来人

最新推荐文章于 2023-07-05 14:29:57 发布

阅读量52

点赞数

分类专栏： Vue 前端文章标签：前端 javascript 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_41377877/article/details/128581752

版权

前端同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

Vue

38 篇文章 2 订阅

订阅专栏

定义

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

语法

注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}}

使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注：

过滤器也可以接受额外参数，多个过滤器也可以串联

并没有改变原本的数据，是产生新的对应的数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>过滤器</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
    <script type="text/javascript" src="../../js/dayjs.min.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>时间格式化</h2>
      <!-- 计算属性实现-->
      <h3>现在时间是：{{fmtTime}}</h3>
      <!-- methods实现-->
      <h3>现在时间是：{{getFmtTime()}}</h3>
      <!-- 过滤器实现-->
      <h3>现在时间是：{{time | timeFilter}}</h3>
      <!-- 过滤器传参-->
      <h3>现在时间是：{{time | timeFilter('YYYY_MM_DD') | mySlice}}</h3>
    </div>

    <script type="text/javascript">
      // 全局过滤器
      Vue.filter('myslice', function (value) {
        return value.slice(0, 4)
      })

      new Vue({
        el: '#root',
        data: {
          time: 1672992595047,
        },
        computed: {
          fmtTime() {
            return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
          },
        },
        methods: {
          getFmtTime() {
            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)
          },
        },
      })
    </script>
  </body>
</html>

我是空谷有来人，谢谢大家关注。