代码改变世界

vue filters过滤器

2018-03-07 23:48  龙恩0707  阅读(559)  评论(0)  编辑  收藏  举报

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查看