フィルターの使用例の概要-WeChatの開発-php.cn

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

php中世界最好的语言

リリース： 2018-06-04 15:52:58

オリジナル

2426 人が閲覧しました

今回はフィルターの使用例についてまとめました。実際の使用例を見てみましょう。 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>

ログイン後にコピー