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
  • 相关阅读:
    洛谷 P1231 教辅的组成
    BZOJ 2190: [SDOI2008]仪仗队
    Codeforces GYM 100741A . Queries
    COGS 1298. 通讯问题
    洛谷 P2604 [ZJOI2010]网络扩容
    codevs 1227 方格取数 2
    codevs 1004 四子连棋
    洛谷 P2319 [HNOI2006]超级英雄
    洛谷 P2153 [SDOI2009]晨跑
    插入排序
  • 原文地址:https://www.cnblogs.com/yanghmartin/p/vue_filter.html
Copyright © 2011-2022 走看看