25. 过滤器

vue允许自定义过滤器,可用于文本的格式化,过滤器可用在{{}}或者v-bind表达式上,它应该被添加在表达式尾部,由|符号表示。

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

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

你可以在组建的选项中定义本地的过滤器:

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

new Vue({
  // ...
})

过滤器还可以串联

{{ message | filterA | filterB }}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • vue过滤器可以格式化常用文本,vue过滤器只能在插值表达式{{}}和v-bind中使用 顾名思义,过滤就是一个数...
    zsyyyyy阅读 1,856评论 1 2
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,252评论 0 6
  • 第一章 Vue概述 what? Vue是实现UI层的渐进式js框架,核心库关注视图层,简单的ui构建,复杂的路由控...
    fastwe阅读 752评论 0 0
  • 你知道午夜醒来 喝一罐啤酒 打开窗户 想抽支烟是什么感觉吗 想念 从吸进空气的嘴往下 从呼出空气的肺向上 那个血肉...
    荼傀阅读 339评论 0 0