So verwenden Sie den Filter in Vue

Vue-Filter werden normalerweise in einigen gängigen Textformatierungen verwendet. Filter können an zwei Stellen verwendet werden: bei der Interpolation mit doppelten geschweiften Klammern und bei V-Bind-Ausdrücken. Dieser Artikel führt Sie in die relevanten Kenntnisse des Web-Front-End-Vue-Filters ein.

Vue-Filter werden normalerweise in einigen gängigen Textformaten verwendet. Interpolation mit doppelten geschweiften Klammern und V-Bind-Ausdrücke.

Fügen Sie beispielsweise automatisch das chinesische Geldzeichen „￥“ zum Preis hinzu oder filtern Sie die Umrechnung zwischen einem Zeitraum oder (Zeitstempel).

Im Zeitalter von Javascript und JQuery! Die Anzeige oder Übermittlung des Zeitraums muss beim Anzeigen oder Senden konvertiert werden, was etwas umständlich ist (ich persönlich fühle mich nach der Verwendung von Vue umständlich).

Schauen Sie sich ohne weiteres das folgende Beispiel an:

Der durch Filter definierte Filter kann lokal oder global sein

Wie üblich muss ich noch warten und zuerst ein globales Filterschlüsselwort (Filter) registrieren

Der globale Registrierungsfilter befindet sich natürlich auch in einer separaten js-Datei

Vue.filter('dateconversion', function (value) { // 一个时间戳转正常的过滤器
 let date = new Date(value) // nuw 一个时间
 let getHours // 小时
 let getMinutes // 分
 if(date.getHours() < 10){getHours = "0"+date.getHours()}else{ getHours = date.getHours()}
// 判断小时是否小于10的补全：加0
 if(date.getMinutes() < 10){getMinutes = "0"+date.getMinutes()}else{ getMinutes = date.getMinutes()}
// 判断分是否小于10的补全：加0
 return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+ getHours +":"+ getMinutes // 返回转换后的值
})

Es ist sehr praktisch zu verwenden, Sie können es in jeder Komponente verwenden, wenn Sie die Anzeigezeit konvertieren möchten

<template>
{{date | dateconversion}} // 使用方式，就是怎么简单，整个项目随便用
</template> 
<script>
export default {
 data () {
  return {
   date: &#39;&#39; // 后台传来的时间戳
  }
 }
}
</script>

Das Obige ist das, was ich für alle zusammengestellt habe an alle in der Zukunft.

Verwandte Artikel:

Detaillierte Einführung in die Wissenspunkte zu Versprechen in js

So lösen Sie das Problem der Fehlausrichtung der niceScroll-Bildlaufleiste in jQuery

So implementieren Sie die Baidu-Suchschnittstelle in JS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Filter in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!