Vue之在methods中使用filter的方法

相干材料:

  • 过滤器(Vue官网应用阐明)

全局定义filter

main.js或者其余定义全局filter

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

new Vue({
  // ...
})

那当然,也能够在以后组件中定义filter,这是针对以后组件应用的。

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

在html应用filter

根本应用

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

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

过滤器能够串联:

<div>
    {{ message | filterA | filterB }}
</div>

过滤器是 JavaScript 函数,因而能够接管参数:

<div>
{{ message | filterA('arg1', arg2) }}
</div>

在methods应用filter

methods: {
    func: (){
        const value = 'john';
        // let f1 = Vue.filters['filterName'] (value);
        let f2 = this.$options.filters['capitalize'](value);  // 间接调用全局的filters
        console.log(f2); // John
    }
}

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据