Heim > Artikel > Web-Frontend > Detaillierte Beispiele zum Erstellen und Verwenden benutzerdefinierter Vue-Filter

Detaillierte Beispiele zum Erstellen und Verwenden benutzerdefinierter Vue-Filter

小云云Original: 2018-05-18 16:23:182780Durchsuche

Dieser Artikel stellt hauptsächlich die Erstellung und Verwendung von benutzerdefinierten Vue-Filtern vor. Ich hoffe, dass er für alle hilfreich ist.

Filter: Es gibt viele Beispiele im Leben, Wasserreiniger und Luftreiniger.

Die Rolle des Filters: Daten filtern, filtern und formatieren.

Die vue1.*-Version verfügt über integrierte Filter, aber in vue2.* verfügen alle Versionen nicht mehr über integrierte Filter.

1. Filtererstellung

Das Wesen des Filters ist eine Methode mit Parametern und Rückgabewert

　　new Vue({
　　　　filters:{
　　　　　　myCurrency:function(myInput){
　　　　　　　　return 处理后的数据
　　　　　　}
　　　　}
　　})

2. Filterverwendung

Syntax:
　2cfd83bcbfaff9bacc12c0937fd77054{{expression |}}fe444642c29a30e898f3de4e0f1d7b5b

Zum Beispiel:
　4a249f0d628e2318394fd9b75b4636b1{{price |. myCurrency}}473f0a7621bec819994bb5020d29372a

3. Erweiterte Verwendung von Filtern

Bei Verwendung des Filters: Sie können auch Parameter angeben, um den Filter anzuweisen, Daten gemäß den Parametern zu filtern.

①Wie übergebe ich Parameter an den Filter?

4a249f0d628e2318394fd9b75b4636b1{{price |. myCurrency('￥',true)}}473f0a7621bec819994bb5020d29372a

②Wie filtere ich in „Empfangen“?

new Vue({
　　filters:{
　　　　//myInput是通过管道传来的数据
　　　　//arg1在调用过滤器时在圆括号中第一个参数
　　　　//arg2在调用过滤器时在圆括号中第二个参数
　　　　myCurrency:function(myInput,arg1,arg2){
　　　　　　return 处理后的数据
　　　　}

　　}

})

Code:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <script src="js/vue.js"></script>
 <title></title>
</head>
<body>

<p id="container">
 <p>{{msg}}</p>
 <h1>{{price}}</h1>
 <h1>{{price | myCurrency(&#39;￥&#39;)}}</h1>
</p>

<script>
 // filter
 new Vue({
  el: &#39;#container&#39;,
  data: {
   msg: &#39;Hello Vue&#39;,
   price:356
  },
  //过滤器的本质 就是一个有参数有返回值的方法
  filters:{
   myCurrency:function(myInput,arg1){
    console.log(arg1);
    //根据业务需要，对传来的数据进行处理
    // 并返回处理后的结果
    var result = arg1+myInput;
    return result;
   }
  }
 })
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <script src="js/vue.js"></script>
 <title></title>
</head>
<body>

<p id="container">
 <p>{{msg}}</p>
 <h1>{{name | myTextTransform(false)}}</h1>
</p>

<script>
 new Vue({
  el: &#39;#container&#39;,
  data: {
   msg: &#39;Hello Vue&#39;,
   name:&#39;Michael&#39;
  },
  filters:{
   myTextTransform: function (myInput,isUpper) {
    if(isUpper)
    {
     return myInput.toUpperCase();
    }
    else{
     return myInput.toLowerCase();
    }
   }
  }
 })
</script>

</body>
</html>

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>过滤器</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
  <p>{{msg}}</p>
  <h1>{{price}}</h1>
  <h1>{{price|myCurrency}}</h1>
 </p>
 <script>
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs",
    price:356
   },
//过滤器的本质 就是一个有参数有返回值的方法
   filters:{
    myCurrency:function(myInput){
     var result = "$"+myInput;
     return result;
    }
   }
  })
 </script>
 </body>
</html>

Das letzte Beispiel ist fest codiert.

Verwandte Empfehlungen:

Detaillierte Erläuterung des AngularJS-Filters zur Implementierung dynamischer Such- und Sortierfunktionen

Über Filterfilter in JavaWeb Servlet-Beispielanalyse

Detaillierte Beispielerklärung von Filter-, Listener- und Interceptor-Mechanismen in Java

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele zum Erstellen und Verwenden benutzerdefinierter Vue-Filter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Java servlet Filter

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

Vorheriger Artikel：Detailliertes Beispiel dafür, wie Angular die rekursive Anzeige von Blog-Kommentaren implementiert und Daten für Antwortkommentare erhältNächster Artikel：Detailliertes Beispiel dafür, wie Angular die rekursive Anzeige von Blog-Kommentaren implementiert und Daten für Antwortkommentare erhält

In Verbindung stehende Artikel

Mehr sehen