zoukankan      html  css  js  c++  java
  • vue 自定义过滤器

    转 https://www.cnblogs.com/wangruifang/p/7765562.html

    vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了。

    1、过滤器创建
      过滤器的本质 是一个有参数 有返回值的方法
      new Vue({
        filters:{
          myCurrency:function(myInput){
            return 处理后的数据
          }
        }
      })

    2、过滤器使用
    语法:
      <any>{{表达式 | 过滤器}}</any>
    举个例子:
      <h1>{{price | myCurrency}}</h1>

    3、过滤器高级用法

    在使用过滤器的时候,还可以指定参数,来告诉过滤器按照参数进行数据的过滤。

    ①如何给过滤器传参?
    <h1>{{price | myCurrency('¥',true)}}</h1>
    ②如何在过滤器中接收到?
    new Vue({
      filters:{
        //myInput是通过管道传来的数据
        //arg1在调用过滤器时在圆括号中第一个参数
        //arg2在调用过滤器时在圆括号中第二个参数
        myCurrency:function(myInput,arg1,arg2){
          return 处理后的数据
        }

      }

    })

    复制代码
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <script src="js/vue.js"></script>
        <title></title>
    </head>
    <body>
    
    <div id="container">
        <p>{{msg}}</p>
        <h1>{{price}}</h1>
        <h1>{{price | myCurrency('¥')}}</h1>
    </div>
    
    <script>
        // filter
        new Vue({
            el: '#container',
            data: {
                msg: 'Hello Vue',
                price:356
            },
            //过滤器的本质 就是一个有参数有返回值的方法
            filters:{
                myCurrency:function(myInput,arg1){
                    console.log(arg1);
                    //根据业务需要,对传来的数据进行处理
                    // 并返回处理后的结果
                    var result = arg1+myInput;
                    return result;
                }
            }
        })
    </script>
    
    </body>
    </html>
    复制代码
    复制代码
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <script src="js/vue.js"></script>
        <title></title>
    </head>
    <body>
    
    <div id="container">
        <p>{{msg}}</p>
        <h1>{{name | myTextTransform(false)}}</h1>
    </div>
    
    <script>
        new Vue({
            el: '#container',
            data: {
                msg: 'Hello Vue',
                name:'Michael'
            },
            filters:{
                myTextTransform: function (myInput,isUpper) {
                    if(isUpper)
                    {
                        return myInput.toUpperCase();
                    }
                    else{
                        return myInput.toLowerCase();
                    }
                }
            }
        })
    </script>
    
    </body>
    </html>
    复制代码
    复制代码
    <!doctype html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>过滤器</title>
        <script src="js/vue.js"></script>
     </head>
     <body>
      <div id="container">
            <p>{{msg}}</p>
            <h1>{{price}}</h1>
            <h1>{{price|myCurrency}}</h1>
        </div>
        <script>
            new Vue({
                el:"#container",
                data:{
                    msg:"Hello VueJs",
                    price:356
                },
    //过滤器的本质 就是一个有参数有返回值的方法
                filters:{
                    myCurrency:function(myInput){
                        var result = "$"+myInput;
                        return result;
                    }
                }
            })
        </script>
     </body>
    </html>
    复制代码
  • 相关阅读:
    Excel Formulas-Vlookup
    C#字符串与unicode互相转换
    string.IsNullOrWhiteSpace
    CREATE SEQUENCE sqlserver
    error CS1056
    WebExceptionStatus
    运维踩坑记
    C# 快捷命令
    sqlserver2019安装教程
    sql server 数据库mdf文件和log文件过大问题
  • 原文地址:https://www.cnblogs.com/xiaozhang666/p/11357395.html
Copyright © 2011-2022 走看看