vue的过滤器语发及应用案例

1.使用地方：

双花括号插值处或  组件属性处

 

例：

{{ message | capitalize }}

<div v-bind:id="rawId | formatId"></div>

 

2.分为两种定义方式：

（1）全局定义

Vue.filter('capitalize', function (value) {

  if (!value) return ''

  value = value.toString()

  return value.charAt(0).toUpperCase() + value.slice(1)

})

 

new Vue({

  // ...

})

 

例2：过滤性别。0返回男，1返回女

<div>{{source|gender}}</div>

 

Vue.filter('gender', function (value) { //value是要准备过滤的原值

   return value === 0 ? '男' : '女'

})

 

const vm = new Vue({

     el:"#root",

     data:{

        source:0

    }

})

（2）局部定义

filters: {

  capitalize: function (value) {

    if (!value) return ''

    value = value.toString()

    return value.charAt(0).toUpperCase() + value.slice(1)

  }

}

 

例2：

const vm = new Vue({

     el:"#root",

     data:{

        source:0

    }，

     filter：{

         gender(value){

               return value === 0 ? '男' : '女'

         }

     }

})

 

<div>{{source|gender|surfix}}</div>

 

例3：连续过滤    过滤完性别之后，再在结果上加“人”

 

const vm = new Vue({

     el:"#root",

     data:{

        source:0

    }，

     filter：{

         gender(value){

               return value === 0 ? '男' : '女'

         }，

         surfix (value) {

               return value + '人'

         },

     }

})

 

<div>{{source|gender}}</div>

 

例4：购物车里价格返回两位小数

 

const vm = new Vue({

     el:"#root",

     data:{

        source:0，

        price：123.4567

    }，

     fixed (value) {

        return value.toFixed(2)          //toFixed把 Number 四舍五入为指定小数位数的数字。

       }

     },

})

 

<div>{{price|fixed}}</div>       //123.45

 

例5：传参

const vm = new Vue({

     el:"#root",

     data:{

        source:0，

        price：123.4567

    }，

     fixed (value，segment) {

        return value.toFixed(segment)          //toFixed把 Number 四舍五入为指定小数位数的数字。

       }

     },

})

 

<div>{{price|fixed（segment）}}</div>       //123.45

 

3.可以对一个值进行连续过滤

{{ message | filterA('arg1', arg2) }}

 

4.可以传多个参数

{{ message | filterA('arg1', arg2) }}

 

这里 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

 

*计算属性完全可以取代过滤器，但有时使用过滤器比较方便。