vue过滤器基础

过滤器

过滤器实质不改变原始数据

Vue过滤器定义

1.全局定义

// 全局注册
Vue.filter('toRMB', function (rmb) {
  if (!rmb) return ''
  return `￥${rmb}`
})

2.局部定义

toFixed(money) {
  if (!money) return ''
  money = Number(money)
  return money.toFixed(2)
},

Vue过滤器使用

在双花括号中使用管道符(pipeline) |隔开，或者v-bind 表达式(v2.1.0以上支持)

<p>{{money | toFixed }}</p>
<p>{{ money | toFixed | toRMB }}</p>     //链式使用时注意先后顺序

过滤器函数的多层参数

过滤器函数是指接收的参数不止value这一个，还可以添加length和suffix参数

<p>{{text | readMore(10,'...')}}</p>

readMore (value,length,suffix) {
  //console.log(arguments);
  if(value.length >= length){
    return value.substr(0,length) + suffix;
  }else{
    return value
  }
}