把文本工具函数封装成 Vue filters

Vue Filters：改变视图而不修改数据

简介

在 Vue.js 中，filters 允许您对数据进行转换，以便在将其呈现到视图时以特定格式显示。与 methods、computed 和 watch 不同，filters 不直接更改响应式数据，而是创建该数据的副本并对其进行修改。这种方法使您能够在视图中呈现格式化后的数据，而无需实际修改底层模型。

1. 日期格式化

Vue.filter('dateFormat', function (value) {
  if (!value) return '';
  return new Date(value).toLocaleDateString();
});

此 filter 将时间戳或日期字符串转换为可读的日期格式。

2. 数字格式化

Vue.filter('numberFormat', function (value) {
  if (!value) return '';
  return value.toLocaleString();
});

此 filter 将数字格式化为包含逗号分隔符的可读字符串。

3. 金额格式化

Vue.filter('moneyFormat', function (value) {
  if (!value) return '';
  return '￥' + value.toFixed(2);
});

此 filter 将数字转换为货币格式，带有一个特定的货币符号和两位小数。

4. 百分比格式化

Vue.filter('percentFormat', function (value) {
  if (!value) return '';
  return (value * 100).toFixed(2) + '%';
});

此 filter 将小数转换为百分比格式。

5. 字符串截取

Vue.filter('truncate', function (value, length) {
  if (!value) return '';
  if (value.length > length) {
    return value.substring(0, length) + '...';
  }
  return value;
});

此 filter 截取字符串并添加省略号，如果字符串的长度超过了指定的长度。

6. 首字母大写

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

此 filter 将字符串的首字母大写。

7. 字符串反转

Vue.filter('reverse', function (value) {
  if (!value) return '';
  return value.split('').reverse().join('');
});

此 filter 将字符串反转。

8. HTML 转义

Vue.filter('escapeHTML', function (value) {
  if (!value) return '';
  return value.replace(/[&<>"']/g, function (c) {
    return {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&apos;'
    }[c];
  });
});

此 filter 转义 HTML 字符以防止脚本注入。

9. URL 编码

Vue.filter('urlEncode', function (value) {
  if (!value) return '';
  return encodeURIComponent(value);
});

此 filter 将字符串编码为 URL 安全的格式。

10. URL 解码

Vue.filter('urlDecode', function (value) {
  if (!value) return '';
  return decodeURIComponent(value);
});

此 filter 将 URL 编码的字符串解码为常规文本。

结论

Vue filters 是一种强大的工具，用于在视图中呈现格式化后的数据。它们提供了一个在不直接修改响应式数据的情况下转换数据的安全方法。通过使用本文中提供的示例，您可以轻松地创建自己的 filters，以满足您的特定需求。

常见问题解答

1. 什么时候应该使用 filters？

当您希望在不修改底层数据的情况下改变视图中呈现的数据格式时，就应该使用 filters。

2. filters 与 methods 的区别是什么？

filters 不能对响应式数据进行更改，只能更改其渲染的结果，而 methods 可以更改响应式数据。

3. filters 与 computed 的区别是什么？

filters 不能使用 Vue 的响应式系统，而 computed 则可以。这意味着 filters 的结果不是响应式的，而 computed 的结果是。

4. 如何使用 filters？

您可以通过在模板中使用 v-filter 指令或在 JavaScript 中通过 Vue.filter() 方法注册 filters。

5. 可以创建自己的 filters 吗？

是的，您可以通过使用 Vue.filter() 方法创建自己的 filters。