Vue中过滤器定义以及使用方法实例

下面是关于“Vue中过滤器定义以及使用方法实例”的完整攻略。

什么是Vue中的过滤器？

在Vue中，过滤器是一段可重用的代码片段，它可以在数据绑定及指令中使用。过滤器可以将数据进行格式化，并在页面中进行展示。

过滤器的定义

在Vue实例中定义过滤器的方式有两种，一种是全局定义，另一种是局部定义。

全局定义

全局定义过滤器的代码如下：

Vue.filter('filterName', function(value) {
  // filter logic
  return new_value;
});

其中，filterName是过滤器的名字，value是需要过滤的值。在filter logic中，我们可以对value进行任何处理，并返回处理后的结果new_value。

局部定义

局部定义过滤器的代码如下：

new Vue({
  // ...
  filters: {
    filterName: function(value) {
      // filter logic
      return new_value;
    }
  }
})

其中，filterName是过滤器的名字，value是需要过滤的值。在filter logic中，我们可以对value进行任何处理，并返回处理后的结果new_value。

过滤器的使用

定义好过滤器后，我们就可以在指令或数据绑定中使用它了。

在指令中使用

<template>
  <div>
    <p>{{ msg | filterName }}</p>
  </div>
</template>

其中，msg为需要过滤的数据，filterName就是我们在定义过滤器时设置的名字。

在数据绑定中使用

<template>
  <div>
    <p v-bind:title="msg | filterName">{{ msg }}</p>
  </div>
</template>

其中，msg为需要过滤的数据，filterName就是我们在定义过滤器时设置的名字。这里使用了v-bind:title指令将msg的值绑定到<p>元素的title属性上。

示例

示例1：将数字金额格式化为货币格式

定义过滤器：

Vue.filter('currency', function(value) {
  if (typeof value !== "number") {
    return value;
  }
  var formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2
  });
  return formatter.format(value);
});

使用示例：

<template>
  <div>
    <p>商品价格：{{ price | currency }}</p>
  </div>
</template>

示例2：将字符串首字母大写

定义过滤器：

Vue.filter('capitalize', function(value) {
  if (!value) {
    return '';
  }
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
});

使用示例：

<template>
  <div>
    <p>{{ name | capitalize }}</p>
  </div>
</template>

这样就可以将name中的字符串首字母大写。