2 usos de filtros en VUE

Vue nos permite personalizar filtros que se pueden usar para algunos formatos de texto comunes. Los filtros se pueden usar en dos lugares: interpolación de doble llave y expresiones v-bind (esta última es compatible desde 2.1.0+). Los filtros deben agregarse al final de las expresiones de JavaScript, indicados por el símbolo de "tubería".

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

​

1. Filtro global
Definir un filtro global es muy sencillo, solo necesitas exportar un método.

Es muy simple de usar, solo necesita introducir este filtro globalmente en el archivo de entrada y usar Vue.filter(clave, valor) para introducirlo.

Por ejemplo, si la marca de tiempo devuelta por el backend de Java tiene una precisión de segundos, mientras que la marca de tiempo en JS se expresa en milisegundos, puede definir un filtro global que convierta la marca de tiempo:

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

En los componentes que necesitan ser utilizados utilizar:

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

Montaje único de filtros globales

/**
 * 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
});

Montaje a granel de filtros globales

//定义方法
//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]);
});

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

2. Filtro de componentes

Los filtros de componentes son más simples, simplemente defina filtros en el componente correspondiente, pero solo es válido para este componente.

Por ejemplo, defina un filtro con la primera letra en mayúscula:

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

ejemplo ejemplo

<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>