Heim > Artikel > Web-Frontend > Zusammenfassung der Filternutzung in Vue

Zusammenfassung der Filternutzung in Vue

php中世界最好的语言Original: 2018-05-15 11:42:483924Durchsuche

Dieses Mal werde ich Ihnen eine Zusammenfassung der Verwendung von Filtern in Vue geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Filtern in Vue?

1. Angepasster Filter, dazu gehört natürlich die globale Registrierung und die Registrierung innerhalb der Instanziierung

(1) die Registrierung des globalen Filters

(1) Die globale Methode Vue.filter() registriert einen benutzerdefinierten Filter, der vor der Vue-Instanziierung platziert werden muss

(2) Die Filterfunktion endet immer mit Der Wert des Ausdrucks als erstes Argument. Parameter mit Anführungszeichen werden als Zeichenfolgen behandelt, während Parameter ohne Anführungszeichen als Ausdrücke berechnet werden

(3) Es können zwei Filterparameter festgelegt werden, vorausgesetzt, dass diese beiden Filter verarbeiten. Es besteht kein Konflikt

(4) Die vom Benutzer eingegebenen Daten können auch verarbeitet werden, bevor sie an das Modell zurückgegeben werden

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>vue自定义过滤器</title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
  <body>
    <p class="test">
      <p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
      <input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
    </p>
    <script type="text/javascript">
//    -----------------------------------------华丽分割线(从model->view)---------------------------------------
      Vue.filter("sum", function(value) {  //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
        return value + 4;
      });
      Vue.filter(&#39;cal&#39;, function (value, begin, xing) {  //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
        return value + begin + xing;
      });
//    -----------------------------------------华丽分割线(从view->model)---------------------------------------
      Vue.filter("change", {
        read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
          return value;
        },
        write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
          console.log("newVal:"+newVal); 
          console.log("oldVal:"+oldVal);
          return newVal;
        }
      });
      var myVue = new Vue({
        el: ".test",
        data: {
          message:12
        }
      });
    </script>
  </body>
</html>

Der Filter übergibt standardmäßig das aktuelle Element und den ersten Filter Jeder Parameter Standardmäßig wird das aktuelle Element verwendet.

(2) Innerhalb der Instanziierung registriert

Das obige Beispiel wird direkt im Vue-Global registriert, und andere Instanzen, die diesen Filter nicht verwenden, werden ebenfalls dazu gezwungen Akzeptieren Sie es. Tatsächlich kann der Filter innerhalb der Instanz registriert werden und wird nur in der Instanz registriert, die ihn verwendet.

Das obige Programm wird wie folgt umgeschrieben:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>vue自定义过滤器</title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
  <body>
    <p class="test">
      <p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
      <input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
    </p>
    <script type="text/javascript">
      Vue.filter("change", {
        read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
          return value;
        },
        write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
          console.log("newVal:"+newVal); 
          console.log("oldVal:"+oldVal);
          return newVal;
        }
      });
      var myVue = new Vue({
        el: ".test",
        data: {
          message:12
        },
        filters: {
          sum: function (value) {
            return value + 4;
          },
          cal: function (value, begin, xing) {
            return value + begin + xing;
          }
        }
      });
    </script>
  </body>
</html>

2 Verwenden Sie die Iterationsfunktion Filter in js

Zusammenfassung der Filternutzung in Vue

(1) Beispiel 1 Originaltext

var app5 = new Vue({
  el: &#39;#app5&#39;,
  data: {
    shoppingList: [
      "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
    ],
    key: ""
  },
  computed: {
    filterShoppingList: function () {
      // `this` points to the vm instance
      var key = this.key;
      var shoppingList = this.shoppingList;
      //在使用filter时需要注意的是，前面调用的是需要使用filter的数组，而给filter函数传入的是数组中的每个item，也就是说filter里面的函数，是每个item要去做的，并将每个结果返回。
      return shoppingList.filter(function (item) {
        return item.toLowerCase().indexOf(key.toLowerCase()) != -1
      });;
    }
  }
})
 <ul>
  Filter Key<input type="text" v-model="key">  
    <li v-for="item in filterShoppingList">
      {{ item }}
    </li>
  </ul>

Der endgültige Effekt realisiert die Funktion des Filterns der Liste basierend auf Schlüsselwörtern.

Zusammenfassung der Filternutzung in Vue

Einige andere Js-Iterationsmethoden - filter(), map(), some(), every(), forEach(), lastIndexOf(), indexOf()

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:

Detaillierte Erläuterung der Methode zur Verarbeitung eines Vue-Projekts, das im Nicht-Website-Stammverzeichnis kompiliert und bereitgestellt wird

Vue implementiert mobiles Terminal. Detaillierte Erläuterung der Schritte für das öffentliche WeChat-Konto

Das obige ist der detaillierte Inhalt vonZusammenfassung der Filternutzung 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

Vorheriger Artikel：Vue bestimmt die Verwendung von Klassen im DomNächster Artikel：Vue bestimmt die Verwendung von Klassen im Dom

In Verbindung stehende Artikel

Mehr sehen