zoukankan      html  css  js  c++  java
  • vue filters过滤器

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

  • 相关阅读:
    Java-1.2-上机
    java-1.2-homework
    java-1.1-上机
    java-1.1-hello world
    上菜!数据结构实验
    卡比兽Python类和对象
    Python最新答案
    关于专业任意选修课的看法——利用层次分析法教你做出最佳选课方案
    虎牙主播开始上线
    小破财App
  • 原文地址:https://www.cnblogs.com/tugenhua0707/p/8526112.html
Copyright © 2011-2022 走看看