上一节:
下一节:

  VueJS 自定义过滤器

  • 定义和使用

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

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

  • 自定义全局过滤器

    VueJS 给我们提供了一个干净简洁的方式来定义我们自己的过滤器，之后我们就可以利用管道 “ | ” 来完成过滤。
    下面示例演示了定义一个全局的自定义过滤器，需要使用 Vue.filter() 构造器。这个构造器需要两个参数： 
    <div id="app">
   <h1>{{ time | dataFormat('yyyy-MM-dd hh:mm:ss') }}</h1>
</div>
<script>
   // 定义一个全局过滤器
   Vue.filter('dataFormat', function (input, pattern = '') {
      var dt = new Date(input);
      // 获取年月日
      var y = dt.getFullYear();
      var m = (dt.getMonth() + 1).toString().padStart(2, '0');
      var d = dt.getDate().toString().padStart(2, '0');
      
      // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
      // 否则，就返回  年-月-日 时：分：秒
      if (pattern.toLowerCase() === 'yyyy-mm-dd') {
         return y+"-"+m+"-"+d;
      } else {
         // 获取时分秒
         var hh = dt.getHours().toString().padStart(2, '0');
         var mm = dt.getMinutes().toString().padStart(2, '0');
         var ss = dt.getSeconds().toString().padStart(2, '0');
         return y+"-"+m+"-"+d+" "+hh+":"+mm+":"+ss;
      }
  });
  new Vue({
     el: "#app",
     data: {
       time: 1575182777000   //毫秒
     }
  })
</script>
    尝试一下
    当全局过滤器和局部过滤器重名时，会采用局部过滤器。

  • 自定义局部过滤器

    下面示例演示了自定义局部过滤器capitalize，让输入的字母首个字母变成大写： 
    <div id="example" >
  <input type="text" v-model="message">
  <p>{{ message | capitalize }}</p>
</div>
<script>
   new Vue({
      el: '#example',
      data: function () {
         return {
            message: 'john'
         }
      },
      filters: {
         capitalize: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
         }
      }
   })
</script>
    尝试一下
    过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。
    过滤器可以串联： 
    {{ message | filterA | filterB }}
    在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
    过滤器是 JavaScript 函数，因此可以接收参数： 
    {{ message | filterA('arg1', arg2) }}
    这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
上一节:
下一节: