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


    1.capitalize:首字母大写(2.0在用)
    <p>{{msg | capitalize}}</p>      //Martin
    
    //vue 数据
    msg:'martin'
    2.uppercase:全部大写(2.0在用)
    <p>{{msg | uppercase}}</p> 
    
    //vue 数据
    msg:'martin'
    // -->MARTIN
    3.lowercase:全部小写
     <p>{{msg | lowercase}}</p>
    //vue 数据 
    msg:'MARTIN'
    
    // -->maritn
    4.currency:货币符号,可传参,参数1:货币符号(string,默认$),参数2:保留小数位数(number,默认2)
     <p>{{num | currency '$' 4}}</p>
    // vue 数据
     num:6666.66
    
    // -->$6666.6600
    5.filterBy:根据某个标志筛选数据 关于filterBy只想说一句:注意参数的引号
    //html
    <input type="text" v-model="search">
    <ul>
        <li v-for="item in  arrList | filterBy search" >{{item}}</li>
    </ul>
     //vue 数据
    arrList:["red","black","blue","green"] 
    //html
    <input type="text" v-model="search">
    <ul>
        <li v-for="item in  user | filterBy search in 'name'" >{{item.name}}</li>
    </ul>
    
    //vue 数据 
    
     user:[ {name:'快车',tag:3}, {name:'顺风车',tag:1}, {name:'出租车',tag:2} ]
    //html
    <input type="text" v-model="search">
    <ul>
        <li v-for="item in  arrList | filterBy 'e'" >{{item}}</li>
    </ul>
    //vue 数据
    arrList:["red","black","blue","green"]
    //html
    <ul>
        <li v-for="item in  user | filterBy 'name' >{{item.name}}</li>
    </ul>
    
    //vue 数据 
    
     user:[ {name:'快车',tag:3}, {name:'顺风车',tag:1}, {name:'出租车',tag:2} ]
    //html
     <ul>       
       <li v-for="item in user | filterBy 'o' in 'name'">{{item.name}}</li>
     </ul>
    //vue 数据
      user:[
                    {name:'martin',tag:3},
                    {name:'roy',tag:1},
                    {name:'tom',tag:2}
                ]
    //html
    <ul>
                <li v-for="item in user | filterBy 3 in 'name'">{{item.name}}</li>
    </ul>
    
    //vue 数据
     user2:[
                    {name:'快车',tag:3},
                    {name:'顺风车',tag:1},
                    {name:'出租车',tag:2}
                ]
    //如果要过滤中文,可以通过一个标识符

     6.orderBy: 排序,若是数字-->根据数字大小排序;若是英文/中文-->按首字母顺序排序(正序传参数1/reserve=false,倒叙传参数-1/reserve=true)

    还是那句话:注意参数引号

    //html
     <ul>
         <li v-for="item in  arrList | orderBy 1" >{{item}}</li>
     </ul>
    //vue 数据
     arrList:["black","red","green","blue"]
    // -->black blue green red
    //html
     <ul>
           <li v-for="item in user2 | orderBy 'name' -1">{{item.name}}</li>
      </ul>
    //vue 数据
     user2:[
                    {name:'快车',tag:3},
                    {name:'顺风车',tag:1},
                    {name:'出租车',tag:2}
                ]
    //-->顺风车 快车 出租车

    7.debounce:延迟执行,常配合事件一起使用

    //html
     <input type="button" @click="oFunc | debounce 2000" value="click me">
    // vue方法
      methods:{
                oFunc:function () {
                    alert('迟到了2秒,工资全无')
                }
            }


    Solve problems in the most elegant way
  • 相关阅读:
    OC面向对象—封装
    设计模式之类关系
    理性:中国别一厢情愿救俄罗斯(转)
    Mockito--完整功能介绍(转)
    从陌陌上市看BAT的移动保卫战(转)
    This exception may occur if matchers are combined with raw values
    RepositoryClassLoader.java
    搭建你的持续集成server
    mysql中怎样查看和删除唯一索引
    Android中Context具体解释 ---- 你所不知道的Context
  • 原文地址:https://www.cnblogs.com/yanghmartin/p/vue_filter.html
Copyright © 2011-2022 走看看