欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue filter 过滤器

程序员文章站 2022-03-10 14:24:02
...

在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;
   }
});

 

相关标签: filter