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

  • 相关阅读:
    gulp.js基础入门
    正则匹配
    app的meta标签
    移动端UC浏览器和QQ浏览器的部分私有meta属性
    雅虎团队经验:网站页面性能优化的 34条黄金守则
    DOCTYPE声明作用及用法详解
    DOCTYPE 中xhtml 1.0和 html 4.01区别分析
    html doctype 作用介绍
    WebStorm
    JQuery的Ajax跨域请求原理概述及实例
  • 原文地址:https://www.cnblogs.com/tugenhua0707/p/8526112.html
Copyright © 2011-2022 走看看