vue过滤器

作者: 陶菇凉 | 来源:发表于2020-11-20 09:18 被阅读0次

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

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

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

你可以在一个组件的选项中定义本地的过滤器:
注意:是与data同级的

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

过滤器可以串联:

{{ message | filterA | filterB }}

在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。
过滤器是 JavaScript 函数,因此可以接收参数:

{{ message | filterA('arg1', arg2) }}

这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。

相关文章

  • tool.js

    vue时间格式过滤器(今天,昨天,周几,年月日) vue金额过滤器 手机横屏签名功能(vue)

  • 6.Vue过滤器

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

  • Vue-04

    过滤器:对显示在页面上的数据进行筛选 全局过滤器 和Vue同级 Vue.filter(“过滤器名称”,func...

  • vue自定义过滤器

    Vue的自定义过滤器有两种:全局过滤器和内部过滤器全局过滤器定义在vue实例化之前 内部过滤器注册在实例内部,仅在...

  • 9.自定义vue全局过滤器

    1.Vue.filter('过滤器名字',过滤器函数):

  • vue 过滤器做字数限制并显示省略号

    定义过滤器 使用vue中的 过滤器filters

  • 关于angular与vue在过滤器方面的不同

    目前看来,angular与vue在过滤器方面差异较大,总的来说angular的过滤器较简单方便,vue的过滤器更像...

  • vue 过滤器filter中this为undefined

    vue过滤器filters 中this为undefined 可以使用computed解决: vue中的过滤器更偏向...

  • Vue过滤器和vue-resource

    过滤器 之前我们学习了Vue的 vue基本指令 进阶学习,我们需要了解Vue的过滤器:Vue.js允许你自定义过滤...

  • vue之自定义过滤器(六)

    一、过滤器介绍:1、在Vue中会通过过滤器(Filters)来渲染数据,使视图可读性更加优雅。2、Vue中的过滤器...

网友评论

    本文标题:vue过滤器

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