Vue filter() - Javascript

在Vue中，filter()是一种可以用来格式化文本内容的方法。它可以接收一个值作为输入，然后返回一个格式化后的值。filter()主要用于过滤器的全局注册以及局部注册两种情况。

全局注册

示例代码

// 定义一个全局的过滤器
Vue.filter('formatDate', function(value) {
  if (value) {
    const d = new Date(value);
    const year = d.getFullYear();
    const month = ("0" + (d.getMonth() + 1)).slice(-2);
    const day = ("0" + d.getDate()).slice(-2);
    return year + "-" + month + "-" + day;
  }
});

解释

在上面的代码中，我们定义了一个名为formatDate的全局过滤器。它使用了JavaScript内置的方法来格式化日期，然后返回一个格式为“YYYY-MM-DD”的结果。

局部注册

示例代码

export default {
  data() {
    return {
      money: 123456.78,
      outOfStock: true,
    };
  },
  filters: {
    formatMoney(value) {
      return '$' + value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    },
    formatStock(value) {
      return value ? 'In Stock' : 'Out of Stock';
    },
  },
};

解释

在这个示例中，我们在Vue的组件中定义了两个局部过滤器：formatMoney和formatStock。这些过滤器可以用来格式化货币金额和库存状态，然后在组件的模板中使用。

使用

示例代码

<div>
  <p>日期: {{ date | formatDate }}</p>
  <p>金额: {{ money | formatMoney }}</p>
  <p>库存: {{ outOfStock | formatStock }}</p>
</div>

解释

在这个示例中，我们在模板中使用上面定义过的过滤器。我们可以通过管道符号“|”将需要格式化的值和过滤器连接起来，然后显示格式化后的结果。

结论

filter()是一种可以非常方便地对内容进行格式化处理的方法。无论是全局还是局部过滤器都可以在减少代码量的前提下提高代码的可读性和维护性。它是Vue框架中的重要组成部分，在日常开发中应该被广泛使用。