vue 过滤器filter的详解

1.代码运用的地方

<!-- 在双花括号中 -->

{{ date | formatDate}}

<!-- 在 `v-bind` 中 -->

<div v-bind:id="data | formatDate"></div>

2.场景：时间格式的转化

3. 注册过滤器函数

首先定义过滤器有两种方式，第一种是全局过滤器，我们可以直接在vue对象上使用filter方法注册过滤器，这种全局注册的过滤器在任何一个组件内都可以使用。第二种则是组件内部的过滤器，注册组件内部过滤器则只能在当前组件内使用，接下来我们使用这两种方式注册过滤器函数。

// 全局函数

Vue.filter('formatTime', function (value) {

  const date = new Date(val);

  const hour = date.getHours();

  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  return `${hour} : ${minutes} : ${seconds}`;

})

组件内：

4. 过滤器可以串联：

5. 接收参数

filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

巴特西

vue 过滤器filter的详解

1.代码运用的地方

2.场景：时间格式的转化

3. 注册过滤器函数

4. 过滤器可以串联：

5. 接收参数

最新文章

热门文章

巴特西

vue 过滤器filter的详解

1.代码运用的地方

2.场景： 时间格式的转化

3. 注册过滤器函数

4. 过滤器可以串联：

5. 接收参数

最新文章

热门文章

2.场景：时间格式的转化