vue filters過濾器

龍恩0707發表於2018-03-07
VueFilter過濾器

vue filters過濾器

vue.js允許我們自定義過濾器，可被使用於一些常見的文字格式化，過濾器可以用在兩個地方，雙花括號插值和 v-bind表示式。最常見的就是雙花括號插值。

比如如下程式碼：
{{message | filters2 | filters3(true, priceCount)}}

過濾器函式filters2接收到的第一個引數就是message的值，message的值將作為引數傳入到filter2函式中，然後繼續呼叫同樣被定義為接收單個引數的
過濾器函式，因此filter3的第一個引數也是message的值，第二個引數是true，第三個引數是 priceCount.

程式碼如下：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      
    </style>
  </head>
  <body>
    <div id="app">
      {{message | filters2 | filters3(true, priceCount)}}
    </div>
  </body>
  <script src="./vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 100,
        priceCount: .8
      },
      filters: {
        filters2: function(arg) {
          console.log("arg: " +arg);
          if (arg > 90) {
            return arg - 8;
          } else {
            return arg;
          }
        },
        filters3: function(arg1, arg2, arg3) {
          var res;
          console.log("arg1: "+arg1);
          console.log("arg2: "+arg2);
          console.log("arg3: "+arg3);
          if (arg2) {
            res = (arg1 * 10 * arg3) / 10;
            console.log("result"+res);
            return res;
          } else {
            res = arg1;
            console.log("result"+res);
            return res;
          }
        }
      }
    })
  </script>
</html>

demo檢視

相關文章