Heim >Web-Frontend >js-Tutorial >Über die Verwendung von Filtern in Vue

Über die Verwendung von Filtern in Vue

亚连
亚连Original
2018-06-15 14:09:362622Durchsuche

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(&#39;my-filter&#39;, function (value) {
 // 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter(&#39;my-filter&#39;)

//在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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn