vue中过滤器filters

vue中允许你自定义过滤器，用于一些文本的格式化。

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

组件中定义过滤器

//html
<div id="app">
 <input type="text" v-model="message" />
 {{message | capitalize }}
</div>

//js
var vm=new Vue({
    el:"#app",
    data:{
        message:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

全局定义过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

过滤器传参

• 传一个参数

//html
{{aa | filterAa}}
//js
filters:{
  filterAa(aa){
    // 这额aa就是过滤器传入的参数
  }
}

• 传2个参数

//html
{{aa | filterAa(bb)}}
//js
filters:{
  filterAa(aa,bb){
    // 这额aa就是过滤器传入的第一个参数
    // 这额bb就是过滤器传入的第二个参数
  }
}

• 传3个参数

//html
{{aa | filterAa(bb,cc)}}
//js
filters:{
  filterAa(aa,bb,cc){
    // 这额aa就是过滤器传入的第一个参数
    // 这额bb就是过滤器传入的第二个参数
    // 这额cc就是过滤器传入的第三个参数
  }
}