Vuejs 过滤器的使用

作者: hedeqiang

发布时间: 2018-09-15 13:41:55

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

我自己的理解:

格式化变量,自定义输出格式。(日期格式处理、字母转变大小写等)

一个转变变量大小写的例子:

html:

<div id="app">
    小写:{{message}}
    大写:{{message |  toUpper}}
  </div>

JavaScript:

  var app = new Vue({
    el: '#app',
    data: {
      message: 'hello vuejs'
    },
    filters: {
      toUpper: function (value) {
        return value.toUpperCase();
      }
    }
  })

更多详细用法,请查看 过滤器小马哥视频

关于极客返利

极客返利 是由我个人开发的一款网课返利、返现平台。包含 极客时间返现、拉勾教育返现、掘金小册返现、GitChat返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。 简而言之就是:你买课,我返现。让你花更少的钱,就可以买到课程。

https://geek.laravelcode.cn

https://geek.idaka.ink

版权许可

本作品采用 知识共享署名 4.0 国际许可协议 进行许可。

转载无需与我联系,但须注明出处,注明文章来源 Vuejs 过滤器的使用