过滤器

不同方式实现格式化时间：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <script src="js/vue.js"></script>
  5.     <!-- 使用时间工具库momentjs -->
  6.     <script src="js/momentjs.min.js"></script>
  7.     <title>过滤器</title>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <h2>原始时间样式：{{time}}</h2>
  12.         <br>
  13.         <h2>计算属性时间转换：{{formatTime}}</h2>
  14.         <br>
  15.         <h2>方法实现时间转换：{{methodTime()}}</h2>
  16.         <br>
  17.         <h2>过滤器实现时间转换：{{time | timeFormater}}</h2>
  18.         <br>
  19.        <h2>过滤器带样式：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h2>
  20.     </div>
  21. </body>
  22. <script>
  23.     Vue.config.productionTip = false;
  24.     const vm = new Vue({
  25.         el: '#app',
  26.         data: {
  27.             time: 1627286601023
  28.         },
  29.         computed: {
  30.             formatTime() {
  31.                 return moment(this.time).format('YYYY-MM-DD HH:mm:ss');
  32.             }    
  33.         },
  34.         methods: {
  35.             methodTime() {
  36.                 return moment(this.time).format('YYYY-MM-DD HH:mm:ss');
  37.             }
  38.         },
  39.         filters: {
  40.             timeFormater(originTime, formatter='YYYY-MM-DD') {
  41.                 return moment(originTime).format(formatter);
  42.             }
  43.         }
  44.     });
  45. </script>
  46. </html>

过滤器使用管道符进行调用。

  1. <h2>过滤器实现时间转换：{{time | timeFormater}}</h2>

过滤器的第一个参数就是管道符左边的内容。

  1. filters: {
  2.     timeFormater(originTime) {
  3.         return moment(originTime).format('YYYY-MM-DD');
  4.     }
  5. }

调用过滤器时可以传入额外的参数，传入的参数被当做过滤器的第二个参数。

  1. <h2>过滤器带样式：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h2>
  1. // 第一个参数为管道符左边内容，第二个参数为调用过滤器时传入的值
  2. timeFormater(originTime, formatter='YYYY-MM-DD') {
  3.     return moment(originTime).format(formatter);
  4. }

过滤器可以串联使用：

  1. <!-- 过滤器串联 -->
  2. <h2>{{time | timeFormater | otherFormater }}</h2>

配置全局过滤器：

在vm中定义的过滤器只对当前vm有效，可以使用Vue.filter配置全局的过滤器

  1. Vue.filter('mySlice', function(value) {
  2.     return value.slice(0, 5);
  3. });

全局过滤器的声明必须在new Vue之前。

过滤器也可以用在v-bind绑定属性上：

  1. <!-- v-bind绑定的属性内容里面也可以使用过滤器 -->
  2. <h2 :x="msg | mySlice">test</h2>

但是不能用在v-model中。