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秒,工资全无')
            }
        }