Ausführliche Erläuterung der Verwendung von Vue-Filtern

Dieses Mal erkläre ich Ihnen ausführlich die Verwendung von VueFilternFiltern und welche Vorsichtsmaßnahmen für die Verwendung von Vue-Filtern gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf .

Beispielcode

Verwenden Sie unter Verwendung der Vue-Einzeldateikomponente das Moment-Plug-in, um das Datum zu formatieren

<template>
 <p>
  <h1>{{date | dateFormat}}</h1> 
 </p>
</template>
<script>
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 moment.locale('zh-cn');
 export default {
  data() {
   return {
    date: new Date()
   }
  },
  filters: {
   dateFormat(val) {
    return moment(val).calendar();
   }
  }
 }
</script>

Anweisungen

Es gibt keine this-Referenz im Filter. Dies innerhalb des Filters ist undefiniert. Versuchen Sie daher nicht, dies zu verwenden, um auf die -Variable oder die Methode der Komponenteninstanz im Filter zu verweisen.

ps: Werfen wir einen Blick auf die grundlegende Verwendung von Vue-Filtern

// 注册
Vue.filter('my-filter', function (value) {
 // 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
//在mustache中使用
{{ msg | uppercase }}

Oder

//在标签中使用
<input type="password" v-model="psw | validate">

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man Sammlungsdaten in Angular durchläuft und anzeigt

Wie man Mint-UI mit Vue verwendet .js Karussellkomponente

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von Vue-Filtern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!