vue2 v-model/v-text 中使用过滤器的方法示例

Vue.js过滤器详解

最新推荐文章于 2025-07-26 18:43:12 发布

weixin_30729609

最新推荐文章于 2025-07-26 18:43:12 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fiona383/p/10841651.html

本文详细介绍了Vue.js中自定义过滤器的使用方法，包括在双花括号插值和v-bind表达式中的应用，以及如何在组件或全局范围内定义过滤器。特别展示了日期格式化过滤器的实现代码，解决在v-model和v-text中使用过滤器的问题。

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

          <!-- 在双花括号中 -->
         
          {{ message | capitalize }}
         
          <!-- 在 v-bind 中 -->
         
          <
          div 
          v-bind:id
          =
          "rawId | formatId"
          ></
          div
          >

可以在一个组件的选项中定义私有的过滤器：

          filters: {
         
          dateFormat： (dataStr) => {
         
          var 
          time = 
          new 
          Date(dataStr);
         
          function 
          timeAdd0(str) {
         
          if 
          (str < 10) {
         
          str = 
          '0' 
          + str;
         
          }
         
          return 
          str
         
          }
         
          var 
          y = time.getFullYear();
         
          var 
          m = time.getMonth() + 1;
         
          var 
          d = time.getDate();
         
          var 
          h = time.getHours();
         
          var 
          mm = time.getMinutes();
         
          var 
          s = time.getSeconds();
         
          return 
          y + 
          '-' 
          + timeAdd0(m) + 
          '-' 
          + timeAdd0(d) + 
          ' ' 
          + timeAdd0(h) + 
          ':' 
          + timeAdd0(mm) + 
          ':' 
          + timeAdd0(s);
         
          }
         
          }

或者在创建 Vue 实例之前全局定义过滤器：

          Vue.filter(
          'dateFormat'
          , (dataStr) => {
         
          var 
          time = 
          new 
          Date(dataStr);
         
          function 
          timeAdd0(str) {
         
          if 
          (str < 10) {
         
          str = 
          '0' 
          + str;
         
          }
         
          return 
          str
         
          }
         
          var 
          y = time.getFullYear();
         
          var 
          m = time.getMonth() + 1;
         
          var 
          d = time.getDate();
         
          var 
          h = time.getHours();
         
          var 
          mm = time.getMinutes();
         
          var 
          s = time.getSeconds();
         
          return 
          y + 
          '-' 
          + timeAdd0(m) + 
          '-' 
          + timeAdd0(d) + 
          ' ' 
          + timeAdd0(h) + 
          ':' 
          + timeAdd0(mm) + 
          ':' 
          + timeAdd0(s);
         
          })

但是如果想要在v-model或者v-text中使用过滤器是不生效的，可以参考以下写法：

          <template>
         
          <div id=
          "app"
          >
         
          <input type=
          "text" 
          v-model=
          "userDate" 
          />  
         
          <span>{{ userDate | dateFormat }}</span>
         
          </div>
         
          </template>
         
          <script>
         
          export 
          default 
          {
         
          data: {
         
          return 
          {
         
          userDate:
          ''
          ,
         
          }
         
          },
         
          filters: {
         
          dateFormat： (dataStr) => {
         
          var 
          time = 
          new 
          Date(dataStr);
         
          function 
          timeAdd0(str) {
         
          if 
          (str < 10) {
         
          str = 
          '0' 
          + str;
         
          }
         
          return 
          str
         
          }
         
          var 
          y = time.getFullYear();
         
          var 
          m = time.getMonth() + 1;
         
          var 
          d = time.getDate();
         
          var 
          h = time.getHours();
         
          var 
          mm = time.getMinutes();
         
          var 
          s = time.getSeconds();
         
          return 
          y + 
          '-' 
          + timeAdd0(m) + 
          '-' 
          + timeAdd0(d) + 
          ' ' 
          + timeAdd0(h) + 
          ':' 
          + timeAdd0(mm) + 
          ':' 
          + timeAdd0(s);
         
          }
         
          }
         
          }
         
          </script>
         
          <style>
         
          </style>

转载于:https://www.cnblogs.com/fiona383/p/10841651.html