Vue filter 过滤当前时间 实现实时更新效果

Vue中可以通过过滤器（Filter）来对模板中的数据进行格式化处理。本文将介绍如何使用Vue filter来过滤当前时间，并实现实时更新效果的方法。

添加全局过滤器

首先我们需要在Vue实例中添加全局过滤器。在Vue中，可以通过 Vue.filter() 方法来添加全局过滤器。下面是一个简单的例子，这个过滤器会将传入的字符串全部转换为大写：

Vue.filter('upperCase', function(value) {
  return value.toUpperCase();
});

接下来，我们需要编写一个过滤器来获取当前时间并返回它的格式化字符串。下面是一个常见的实现方法：

Vue.filter('formatDate', function(value) {
  const date = new Date(value);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
});

这个过滤器接受一个表示时间的参数，并返回一个格式化后的字符串。注意，这里使用了ES6的字符串模板语法来生成字符串。

在模板中使用过滤器

现在我们已经定义好了一个全局的过滤器，接下来我们需要在模板中使用它。我们可以通过在需要过滤的表达式中使用 | 符号并指定过滤器的名称来使用过滤器。

下面是一个例子，假设我们有一个Vue组件中的数据 startTime，表示一个事件的开始时间：

<template>
  <div>
    <p>{{ startTime }}</p>
  </div>
</template>

如果我们直接在模板中使用 {{ startTime }}，则显示的将是一个时间戳，不太直观。我们可以通过添加 | formatDate 来使用刚刚定义的过滤器：

<template>
  <div>
    <p>{{ startTime | formatDate }}</p>
  </div>
</template>

这样，我们就可以将事件的开始时间以特定的格式显示出来了。

实现实时更新效果

但是，我们发现上面的例子中只有在页面刷新时才会更新时间，而不是实时更新的效果。我们需要实现一个自动更新的功能。

在Vue中，可以通过使用 setInterval() 函数来定时刷新模板中的数据。具体地，我们可以在组件的 data 属性中添加 currentTime 数据，并在 mounted() 方法中设置一个定时器，每隔一秒钟更新 currentTime 的值，从而更新模板中显示的时间。

接下来，我们需要修改模板中的表达式，从 startTime 变为 currentTime：

<template>
  <div>
    <p>{{ currentTime | formatDate }}</p>
  </div>
</template>

下面是具体的代码实现：

Vue.filter('formatDate', function(value) {
  const date = new Date(value);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
});

Vue.component('clock', {
  data() {
    return {
      currentTime: Date.now()
    };
  },
  mounted() {
    setInterval(() => {
      this.currentTime = Date.now();
    }, 1000);
  }
});

new Vue({
  el: '#app'
});

<div id="app">
  <clock></clock>
</div>

<template id="clock">
  <div>
    <p>{{ currentTime | formatDate }}</p>
  </div>
</template>

这个例子中，我们实现了一个名为 clock 的组件，它会实时更新当前时间并以特定的格式显示出来。在这个例子中，我们可以通过在模板中添加 <clock></clock> 的方式来使用这个组件。

以上就是使用Vue filter 过滤当前时间并实现实时更新效果的完整攻略，希望对你有所帮助。