Vue filter 过滤器使用详解

在Vue中当我们想要对一个数值进行处理时（改变格式、大小，类型，过滤等）可以使用filter

Vue过滤器有两种注册方式，全局、或者是局部注册

在一个组件内部想要使用一个不太常用的过滤器，可以局部注册

局部注册的过滤器可以直接在组件的选项中定义

export default {
    name: 'FilterDemo',
    /* 局部过滤器 */
    filters: {
      /* 格式化时间戳 */
      formatDate (val) {
        const date = new Date(val);
        const year = date.getFullYear();
        const month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
        const day = date.getDate() > 9 ? date.getDate() + 1 : `0${date.getDate() + 1}`;
        return `${year}-${month}-${day}`;
        console.log(val);
      }
    },
    data () {
      return {
 
      }
    }
    
  }

如果是通用型的过滤器可以考虑全局注册，全局注册过滤器应该在创建 Vue 实例之前全局定义过滤器，可以在main.js中

import Vue from 'vue';
Vue.filter('formatTime', function (val) {
  const date = new Date(val);
  const hour = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  return `${hour} : ${minutes} : ${seconds}`;
});

当项目中多次需要使用过滤器时，可以新建filter文件，用以创建项目所需的过滤器

// 像这样
export function toThousandslsFilter(num) {
  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}

export function dateFilter(num) {
  // 日期格式转换
}

export function lowerFilter(num) {
    // 大小写转换
}

// ...

// 可以将项目经常需要用到的过滤器全部定义在此

然后再main.js中全局注册，可以这样写

import * as filters from './filters' // global filters

// register global utility filters.
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

注册完之后就是调用了

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

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>


// 用户从input输入的数据在回传到model之前也可以先处理
 <input type="text" v-model="message | change">

Vue.filter("change", {
   read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
        return value;
   },
   write: function (newVal,oldVal) { // view -> model  在写回数据之前格式化值
        console.log("newVal:"+newVal); 
        console.log("oldVal:"+oldVal);
        return newVal;
   }
});