Vue-过滤器

最新推荐文章于 2023-06-14 19:52:56 发布

白桃味稠鱼烧

最新推荐文章于 2023-06-14 19:52:56 发布

阅读量441

点赞数 1

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

本文链接：https://blog.csdn.net/qq_40792800/article/details/122478541

版权

vue专栏专栏收录该内容

51 篇文章 13 订阅

订阅专栏

数组过滤( filter )我们都不陌生，就是对数组的每一项做一些处理之后，返回一个新的数组。那么Vue的过滤器又是个啥玩意呢？

我们现在有一个需求，就是将当前时间戳转为为正常时间展示出来，我们可以有很多种方法来实现

首先，引入 dayjs，这是一个类似于 Moment.js de 处理时间和日期的 js库，但是更为轻量。

computed实现

<body>
  <div id='root'>
    <!-- 计算属性实现 -->
    <h2>当前时间是：{{ fmtTime }}</h2>
  </div>

  <script>
    const vm = new Vue({
      el: '#root',
      data() {
        return {
          time: Date.now()
        }
      },
      computed: {
        fmtTime() {
          return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
        }
      }
    })
  </script>
</body>

展示效果如下：

watch 监听实现 ：处理完时间之后，重新赋值给 data 中的 time

<!-- watch 实现 -->
<h2>当前时间是：{{ fTime }}</h2>

data() {
  return {
    time: Date.now(),
  }
},

watch: {
  time: {
    handler(val) {
      this.time= dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    },
    immediate: true
  }
}

methods 方法实现

<!-- methods方法实现 -->
<h2>当前时间是：{{ getFmtTime() }}</h2>

methods: {
  getFmtTime() {
    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
  }
},

上面的方法都可以实现这一效果，但是Vue还给我们提供了另外一个实现方法，那就是过滤器。

过滤器定义：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

所以我们知道了 Vue 中过滤器的作用是用来格式化文本进行展示的。

过滤器使用：过滤器可以用在：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

过滤器实现 (不传参 ) ：

<!-- 过滤器实现 不传参-->
<h2>当前时间是：{{ time | timeFormter}}</h2>

methods：{},
filters: {
  timeFormter(value) {
    console.log(value, 'value')
    return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
  },
  asd(){
    return '可以存在多个过滤器'
  }
},

过滤器实现 ( 传参 ) ：

<!-- 过滤器实现 传参-->
<h2>当前时间是：{{ time | timeFormter2('YYYY-MM-DD')}}</h2>

filters: {
  timeFormter2(value, type = 'YYYY-MM-DD HH:mm:ss') {
    return dayjs(value).format(type)
  }
},

过滤器实现 ( 传参&&截取日期年份 ) - 多个过滤器串联：截取年份展示

我们直接在第一个过滤器中传递年份也可以实现，但是这里做的是过滤器串联的讲解

<!-- 过滤器实现 传参&&截取日期年份 多个过滤器串联-->
<h2>当前时间是：{{ time | timeFormter2('YYYY-MM-DD') | spliceTime}}</h2>

filters: {
  timeFormter2(value, type = 'YYYY-MM-DD HH:mm:ss') {
    return dayjs(value).format(type)
  },
  spliceTime(value) {
    console.log(value, 'value ')
    return value.splice(0, 4)
  }
},

串联的过滤器工作流程是这样的，Vue 会把 | 之前的值传递给第一个过滤器处理，第一个过滤器的返回值，同时也会被Vue会当做下一个过滤器的第一个参数传递到下一个过滤器中，以此形成串联

局部过滤器与全局过滤器

上文的过滤器都是属于局部的，因为这些过滤器只能在当前组件中使用，如果我们还存在另外一个组件，也想调用当前组件内部的过滤器，是会报错的。例如：

<div id="root2">
  {{msg | spliceTime}}
</div>

const vm2 = new Vue({
  el: '#root2',
  data() {
    return {
      msg: 'hello word!'
    }
  },
})

为了方便，我在同一个html文件呢中实例化了两个 vm ，然后各自展示，第一个还是调用自身过滤器截取时间年份，第二个 data 中定义的 msg 是 'hello word' ，但是我也只想展示前四位，所以我也想调用第一个实例内部的截取过滤器。但是界面报错，提示这个过滤器不存在。

为了解决这种问题，Vue 给我们提供了全局过滤器，通过挂载到 Vue 根实例上，从而能被同时被多个组件所引用。

<!-- 过滤器实现 传参 多个过滤器串联-->
<h2>当前时间是：{{ time | timeFormter2('YYYY-MM-DD') | sliceStr}}</h2>

<div id="root2">
  {{msg | sliceStr}}
</div>

// 注册全局过滤器
Vue.filter('sliceStr', function (value) {
  console.log(value, 'value ')
  return value.slice(0, 4)
})

全局过滤器其实也是一个函数，韩式接收两个参数，第一个是字符串，代表的是需要注册的过滤器名称，第二个是一个函数，用来处理数据且返回需要的格式。

ps：全局过滤器和局部过滤器有两点不同。

全局过滤器需要先注册，然后再 new Vue() 实例化，如果反了，那么实例化之后的 vm 上，是不存在这个过滤器方法的。而局部过滤器则是在组件实例化的时候直接挂载到了局部组件的 vm 实例上。
全局过滤器其实是不带s的，因为他是一个全局的方法，只能单独调用该方法注册过滤器，而不能像局部过滤器一样，直接写在 filters 对象中

v-bind表达式中使用过滤器

除了在插值语法中使用过滤器，Vue 还允许我们在 v-bind 表达式中使用过滤器，例如我的标签属性需要动态展示一个字符串，也要截取前四位，这个时候，我们就需要用到

<div id="root2">
  <p :a='msg | sliceStr'>{{msg | sliceStr}}</p>
</div>

注意事项：

局部过滤器 filters 和 methods 属性是同级的（在同一个业务组件中）
局部过滤器是一个对象，内部可以存在多个方法，就是通过这些方法来实现数据处理，而 全局过滤器则是一个方法，需要单独调用这个方法来注册不同的全局过滤器
过滤器在使用过程中通过管道符 '|' 来进行指示，使用了 | Vue才知道你调用了过滤器
Vue规定，过滤器只能用在插值语法或 v-bind表达式 中，这两者内部都存在两个值，| 前的就是需要处理的值， | 后的就是过滤器，
过滤器方法最后需要返回处理完成之后的数据，以此来替换插值语法或 v-bind 表达式，否则页面上不会有展示效果
glq并没有改变原有data中的数据，而是通过函数处理之后返回了新的数据
过滤器可以接收参数，多个过滤器可以串联
参数问题：
1. 不传递参数，那么 Vue 会自动将需要处理的值传递到过滤器中作为第一个参数，
2. 如果传递了参数，那么需要处理的值还是会作为第一个参数，传递的参数则会按顺序接收

白桃味稠鱼烧

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-过滤器

数组过滤( filter )我们都不陌生，就是对数组的每一项做一些处理之后，返回一个新的数组。那么Vue的过滤器又是个啥玩意呢？我们现在有一个需求，就是将当前时间戳转为为正常时间展示出来，我们可以有很多种方法来实现首先，引入 dayjs，这是一个类似于Moment.js de 处理时间和日期的 js库，但是更为轻量。computed实现<body> <div id='root'>  <h2&g.
复制链接

扫一扫