Vue管道

作者: 念_ae7b | 来源:发表于2018-11-01 17:27 被阅读0次

在Vue2.x版本中,filter需要自己定义才能够使用

过滤器可以用在两个地方:

双花括号插值,如:{{ message | capitalize }}
v-bind表达式(从2.1.0+版本支持),如:<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实例之前全局定义:
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

函数中的value既是message的值

Vue中的过滤器可以串联
{{ message | filterA | filterB}}
过滤器的执行顺序是从左到右,左边返回的值是下一个过滤器中的value

相关文章

  • Vue管道

    在Vue2.x版本中,filter需要自己定义才能够使用 过滤器可以用在两个地方: 双花括号插值,如:{{ mes...

  • 6.Vue过滤器

    Vue过滤器: vue过滤器使用管道 | 进行调用,如:{{name | myFilter}},如果需要传入参数...

  • Vue中管道的使用

    在Vue2.x版本中,filter需要自己定义才能够使用过滤器可以用在两个地方: 双花括号插值,如:{{ mess...

  • vue自定义管道

    1、创建一个管道——货币过滤管道 2、调用管道文件在项目中引入 3、使用管道

  • Vue-04

    今天学习了过滤器; vue.js允许在表达式后面添加可选的过滤器,以管道符表示,eg:{{message|x}};...

  • Vue.js中的过滤器(filter)

    过滤器:本质上是函数,它与angularJs中的过滤器语法有些相似,他们都是使用(|)管道符进行连接。 Vue.j...

  • vue.js-过滤器、指令、事件、语法糖

    小练习 需求: 在页面中实时显示当前时间 过滤器 Vue. 支持在{{}}插值的尾部添加一小管道符 “ | ” 对...

  • 工业管道工程施工程序

    管道分类与分级 工业管道按压力分级 管道的组成 管道由管道组成件和管道支承件组成 管道组件管道组成件是用于连接或装...

  • Vue.js 过滤器

    Vue.js 支持在{{ }} 插值的尾部添加一个管道符“(|)” 对数据进行过滤,经常用于格式化文本,比如字母全...

  • 第一章:vue.js-过滤器(基础篇)

    vue.js支持在{{}}插值的尾部添加一个管道符“(|)”对数据进行过滤,经常用于格式化文本,比如字母全部大写...

网友评论

      本文标题:Vue管道

      本文链接:https://www.haomeiwen.com/subject/hawxxqtx.html