zoukankan      html  css  js  c++  java
  • vue自定义过滤器的创建和使用

      

    过滤器:生活中有很多例子,净水器 空气净化器 。
    过滤器的作用:实现数据的筛选、过滤、格式化。

    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>

     最后一个例子是写死的

  • 相关阅读:
    mysql 函数 存储过程 事件(event) job 模板
    protobuf 无proto 解码 decode 语言 java python
    mitmproxy fiddler 抓包 填坑
    android adb 常用命令
    android机器人 模拟 踩坑过程
    RabbitMQ添加新用户并支持远程访问
    Windows下RabbitMQ安装及配置
    Java mybatis mysql 常用数据类型对应关系
    easyExcel 踩坑
    linux防火墙查看状态firewall、iptable
  • 原文地址:https://www.cnblogs.com/wangruifang/p/7765562.html
Copyright © 2011-2022 走看看