Skip to content

Vue中的过滤器

Vue 中自定义过滤器,可被用于一些常见的文本格式化

定义过滤器

全局过滤器 src-> main.js (在创建 Vue 实例之前)

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

在一个组件的选项中定义本地的过滤器

js
filters: {
  price (value) {
    let val = Number(value)
    let	pri = ''

    if(val < 1000) {
    	pri = val
    } else if (val >= 1000 && val < 10000){
    	val = val / 1000
    	pri = val + ''
    } else if(val >= 10000){
    	val = val / 10000
    	pri = val + ''
    }
    return pri
  }
}

使用过滤器

vue
{{ value | price }}

<!-- or -->

<div :price="value | capitalize"></div>

过滤器可以串联

vue
{{ value | price | toRMB }}

创建时间:

最近更新: