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 的值作为第三个参数。