这次给大家带来vue过滤器filters使用详解，vue过滤器filters使用的注意事项有哪些，下面就是实战案例，一起来看一下。
示例代码
采用vue单文件组件，使用moment插件格式化日期
<template>  <p>   <h1>{{date | dateformat}}</h1>   </p> </template> <script>  import moment from 'moment';  import 'moment/locale/zh-cn';  moment.locale('zh-cn');  export default {   data() {    return {     date: new date()    }   },   filters: {    dateformat(val) {     return moment(val).calendar();    }   }  } </script>
说明
过滤器内是没有this引用的，过滤器内的this是undefined，所以不要在过滤器内尝试使用this引用组件实例的变量或者方法。
ps：下面看下vue 过滤器的基本用法
// 注册 vue.filter('my-filter', function (value) {  // 返回处理后的值 }) // getter，返回已注册的过滤器 var myfilter = vue.filter('my-filter') //在mustache中使用 {{ msg | uppercase }}
或
//在标签中使用 <input type="password" v-model="psw | validate">
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样让angular里的集合数据遍历显示
vue.js如何使用mint-ui轮播组件
以上就是vue过滤器filters使用详解的详细内容。