Über die Verwendung von Filtern in Vue

In diesem Artikel wird hauptsächlich der Beispielcode von Vue-Filtern und die grundlegende Verwendung von Vue-Filtern vorgestellt

Beispielcode

Übernehmen Sie die Vue-Einzeldateikomponente und verwenden Sie das Moment-Plugin, um das Datum zu formatieren

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

2. Wirkung

3. Beschreibung

Dieser Verweis ist im Filter nicht vorhanden, dieser jedoch im Filter undefiniert, also versuchen Sie nicht, dies zu verwenden, um auf Variablen oder Methoden der Komponenteninstanz innerhalb des Filters 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">

Das Obige ist was Ich habe es für alle zusammengestellt. Ja, ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So implementieren Sie eine Tabelle mit jQuery+CSS

So implementieren Sie ein Kommentar-Framework mit Vue

Über die Gründe, warum auf den V4-Verlauf nicht zugegriffen werden kann

Warum kann Response.body().string() nicht mehrmals aufgerufen werden?

So implementieren Sie einen Kalender mit Vue-Komponenten (ausführliches Tutorial)

Verwenden Sie Webpack, um ein Vue-Gerüst zu erstellen

Das obige ist der detaillierte Inhalt vonÜber die Verwendung von Filtern in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!