VUE中filters过滤器的两种用法实例

更新时间：2022年04月28日 10:57:05 作者：小小张自由--张有博

vue中过滤器的作用可被用于一些常见的文本格式化,也就是修饰文本,但是文本内容不会改变,下面这篇文章主要给大家介绍了关于VUE中filters过滤器的两种用法,需要的朋友可以参考下

前言

Vue.js 允许我们自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号（{undefined{ }}）插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

<!-- 在双花括号中 -->
<div>{{ message | capitalize }}</div>
 
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

一、全局过滤器

定义一个全局过滤器很简单，只需要导出一个方法即可。

使用的时候很简单，只需要在入口文件全局引入此过滤器即可，使用 Vue.filter(key, value) 引入。

比如，Java后端返回的时间戳精确到秒，而JS中的时间戳是用毫秒表示，则可以定义一个转换时间戳的全局过滤器:

//main.js
import Vue from 'vue'
Vue.filter('millisecond', (value) => {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

在需要使用的组件使用：

<div>{{1516101106 | millisecond}}</div>

全局过滤器之单一挂载

/**
 * dateTmp:要过滤的值
 * fmtTmp:传入的参数，可接收多个参数
 */
<template>
   <!-- 2021-12-20 19:14:18 -->
  <div>{{ 1639998858000 | dateFormat("yyyy/MM/dd HH:mm:ss") }}</div>
</template>
 
Vue.filter('dateFormat', function (dateTmp, fmtTmp) {
  let fmt = fmtTmp
  let date = dateTmp
 
  if (!fmt) {
    fmt = 'yyyy.MM.dd'
  }
  if (!(date instanceof Date)) {
    date = new Date(date)
  }
  let o = {
    'M+': date.getMonth() + 1, // 月份
    'd+': date.getDate(), // 日
    'h+': date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, // 小时
    'H+': date.getHours(), // 小时
    'm+': date.getMinutes(), // 分
    's+': date.getSeconds(), // 秒
    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
    'S': date.getMilliseconds() // 毫秒
  }
  let week = {
    '0': '日',
    '1': '一',
    '2': '二',
    '3': '三',
    '4': '四',
    '5': '五',
    '6': '六'
  }
 
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  if (/(E+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '星期' : '周') : '') + week[date.getDay() + ''])
  }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
    }
  }
  return fmt
});

全局过滤器之批量挂载

//定义方法
//filters.js
export function slice (temp,num) {
    return temp.slice(0,num);
}

//挂载
//main.js
import * as filters from '@/assets/js/filters';
 
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key]);
});

//调用
<!-- 1234 -->
<div>{{ '123456' | slice(4) }} </div>

二、组件过滤器

组件过滤器更简单，只需在对应组件中定义 filters 即可，不过只针对本组件有效。

比如定义一个首字母大写的过滤器：

//定义方法
export default {
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}

例子例子

<template>
  <!-- 我要被过... -->
  <div>{{ msg | setSize }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      msg: "我要被过滤",
    };
  },
  filters: {
    setSize(value) {
      if (value.length > 4) {
        return value.splice(0, 4) + "...";
      } else {
        return value;
      }
    },
  },
};
</script>

附：过滤器中传入多个参数

过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

<template>
  <div class="test">
    <!-- 要过滤的数据，永远是第一个参数；通过filter函数，传递的参数，依次排在后面。 -->
    <p>{{ new Date() | filter_dateFormat }}</p>
    <p>{{ new Date() | filter_dateFormat('YYYY-MM-DD') }}</p>
    <p>{{ new Date() | filter_dateFormat('YYYY-MM-DD', count) }}</p>
  </div>
</template>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
<script>
export default {
  data() {
    return {
      count: 10
    };
  },
  filters: {
    filter_dateFormat(date, format, count) {
      return (
        moment(date).format(format || "YYYY-MM-DD HH:mm:ss") +
        (count ? " -- " + count : "")
      );
    }
  }
};
</script>
 
<style lang="scss" scoped>
.test {
  color: black;
}
</style>

总结

到此这篇关于VUE中filters过滤器的两种用法的文章就介绍到这了,更多相关VUE filters过滤器用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue通过axios发送ajax请求基础演示
这篇文章主要介绍了Vue通过axios发送ajax请求基础演示,包括了axios发送简单get请求，axios get传参，axios发送post请求等基础代码演示需要的朋友可以参考下
2023-02-02
vue-router路由与页面间导航实例解析
vue-router 是一个插件，需要在 Vue 的全局引用中通过 Vue.use()将它引用到 Vue 实例当中。接下来通过本文给大家分享vue-router路由与页面间导航，需要的朋友参考下吧
2017-11-11
vue项目中使用ueditor的实例讲解
下面小编就为大家分享一篇vue项目中使用ueditor的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue 中swiper的使用教程
本文通过实例代码给大家介绍了vue 中swiper的使用，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-05-05
vue 左滑删除功能的示例代码
这篇文章主要介绍了vue 左滑删除功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01
Vue路由重定向和别名的区别说明
这篇文章主要介绍了Vue路由重定向和别名的区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue3循环设置ref并获取的解决方案
我们在平时做业务的时候,父子组件通信会经常用到ref,这篇文章主要给大家介绍了关于vue3循环设置ref并获取的解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-02-02
详解Vue 事件驱动和依赖追踪
本篇文章主要介绍了详解Vue 事件驱动和依赖追踪，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
defineProperty和Proxy基础功能及性能对比
这篇文章主要为大家介绍了defineProperty和Proxy基础功能及性能对比，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vuex入门最详细整理
在本篇文章里小编给大家分享的是关于vuex入门最详细整理的相关内容，需要的朋友们参考下。
2020-03-03