フィルターの使用例の概要

今回はフィルターの使用例についてまとめました。実際の使用例を見てみましょう。 1. カスタマイズされた

filter

には、もちろん、グローバルに登録することと、インスタンス化内で登録することが含まれます

(1) グローバル フィルターの登録

(1) グローバル メソッド Vue.filter() の登録 カスタム フィルターを配置する必要がありますVue のインスタンス化前

(2) フィルター関数は、常に

expression

の値を最初のパラメーターとして受け取ります。引用符付きのパラメーターは文字列として扱われ、引用符のないパラメーターは式として計算されます(3) これら 2 つのフィルターの処理が競合しない限り、2 つのフィルター パラメーターを設定できます

(4) によって入力されたデータ入力からのユーザーは、モデルに送り返される前に処理することもできます

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>
  

フィルターはデフォルトで現在の項目を渡し、フィルターの最初のパラメーターはデフォルトで現在の項目になります。

(2) インスタンス化内に登録される

上記の例は、このフィルターを使用しない他のインスタンスも強制的に受け入れられます。インスタンスを使用する場合のみインスタンスに登録します

上記のプログラムを以下のように書き換えます

(1) 例1 原文

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>
  

最終的な効果は以下のようになります。キーワードに応じてリストをフィルタリングする機能。

他のいくつかの Js 反復メソッド - filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()

ケースを読んだ後、あなたはそれをマスターしたと思いますこの記事では、さらにエキサイティングな方法については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

DOM内のクラスの値を取得する方法

コンパイル後に実際のプロジェクトがルートディレクトリにない場合の対処方法

以上がフィルターの使用例の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。