vue通过过滤器实现数据格式化

下面就是vue通过过滤器实现数据格式化的完整攻略：

1. 什么是vue过滤器

在vue中，过滤器（Filter）是一种可复用的方法来格式化文本。它可以像管道一样在文本插值和v-bind表达式中使用。

2. 过滤器的语法

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”字符指示：

<!-- 在双花括号中使用 -->
{{ message | capitalize }}

<!-- 在 v-bind 中使用 -->
<div v-bind:id="rawId | formatId"></div>

上面的例子中，capitalize和formatId都是在JavaScript属性访问语法中使用的过滤器函数。该函数接收表达式的值作为其第一个参数：

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

Vue.filter('formatId', function (rawId) {
  return 'id-' + rawId
})

3. 示例说明

示例1：时间格式化

我们可以使用过滤器来格式化日期时间，在template中使用为：

<!--原格式： Sat Jan 01 2022 00:00:00 GMT+0800 (Central European Standard Time)-->
<p>发布时间：{{date | formatDate}}</p>

上面的代码中，我们使用了日志的 createdAt 毫秒数作为date数据，在模板里直接输出不太好看，于是我们使用了一个 formatDate 过滤器来将毫秒数格式化为更友好的时间展示：

Vue.filter('formatDate', function (time) {
  let date = new Date(time);
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let second = date.getSeconds();
  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
})

示例2：金额格式化

我们也可以使用过滤器来处理金额显示，以9999为例，通过过滤器格式化为9,999，在template模板中使用如下：

<!--原格式： 9999-->
<p>金额：{{money | toCurrency}}</p>

上面的代码中，我们使用到了 money 这一变量，在模板里直接输出不太友好，于是我们使用了一个 toCurrency 过滤器来将金额数改成按千位分隔符显示，格式化为“9,999”：

Vue.filter('toCurrency', function (money) {
    return Number(money).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
})

上面的过滤器先通过toFixed方法让数据保留2位小数，再使用正则表达式，将数字每隔三位添加一个逗号，最后将格式化后的数值返回。

以上就是通过vue过滤器实现数据格式化的攻略，如有不懂的地方，欢迎指出。