2 Verwendungen von Filtern in VUE

Mit Vue können wir Filter anpassen, die für einige gängige Textformatierungen verwendet werden können. Filter können an zwei Stellen verwendet werden: Interpolation mit doppelten geschweiften Klammern und v-bind-Ausdrücken (letzteres wird seit 2.1.0+ unterstützt). Filter sollten am Ende von JavaScript-Ausdrücken hinzugefügt werden, was durch das „Pipe“-Symbol angezeigt wird.

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

​

1. Globaler Filter
Das Definieren eines globalen Filters ist sehr einfach, Sie müssen nur eine Methode exportieren.

Es ist sehr einfach zu verwenden, Sie müssen diesen Filter nur global in der Eintragsdatei einführen und Vue.filter (Schlüssel, Wert) verwenden, um ihn einzuführen.

Wenn beispielsweise der vom Java-Backend zurückgegebene Zeitstempel auf Sekunden genau ist, während der Zeitstempel in JS in Millisekunden ausgedrückt wird, können Sie einen globalen Filter definieren, der den Zeitstempel konvertiert:

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

In den Komponenten, die verwendet werden müssen, verwenden Sie:

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

Einzelner Mount von globalen Filtern

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

Bulk-Mounting von globalen Filtern

//定义方法
//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. Komponentenfilter

Komponentenfilter sind einfacher, definieren Sie einfach Filter in der entsprechenden Komponente, aber es gilt nur für diese Komponente.

Definieren Sie beispielsweise einen Filter mit einem großen Anfangsbuchstaben:

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

Beispiel Beispiel

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