So verwenden Sie den Filter in Vue-js-Tutorial-php.cn

So verwenden Sie den Filter in Vue

php中世界最好的语言

Freigeben： 2018-06-02 10:16:25

Original

1678 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie den Filter in Vue verwenden. Was sind die Vorsichtsmaßnahmen, wenn Sie den Filter in Vue verwenden?

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

(1) 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

nbsp;html>

  
    <meta>
    <title>vue自定义过滤器</title>
    <script></script>
    <meta>
  
  
    <p>
      </p><p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
      <input> <!--用户从input输入的数据在回传到model之前也可以先处理-->
    
    <script>
//    -----------------------------------------华丽分割线(从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>

Nach dem Login kopieren

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:

nbsp;html>

  
    <meta>
    <title>vue自定义过滤器</title>
    <script></script>
    <meta>
  
  
    <p>
      </p><p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
      <input> <!--用户从input输入的数据在回传到model之前也可以先处理-->
    
    <script>
      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>

Nach dem Login kopieren

2 Verwenden Sie die Iterationsfunktion Filter in js

So verwenden Sie den Filter in Vue

(1) Beispiel 1 Originaltext

var app5 = new Vue({
  el: '#app5',
  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
      });;
    }
  }
})

Nach dem Login kopieren

{{ item }}

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

So verwenden Sie den Filter 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:

Beispielanalyse der Node.js+Konsolen-Ausgabeprotokolldatei

So bedienen Sie jQuery, um die Maus zu erreichen über Das entsprechende große Bild wird auf dem kleinen Bild des Produkts angezeigt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Filter in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!