vue过滤器基础

sunshine0670

于 2020-06-18 16:09:33 发布

阅读量172

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/lifangfang0607/article/details/106807736

版权

Vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了Vue过滤器的基础知识，包括全局和局部定义，以及如何在模板中使用过滤器。重点讲解了过滤器函数可以接受多个参数的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

过滤器

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

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
  }
}