likes
comments
collection
share

VUE2- 重温全局过滤器《Vue 2 -- 全局过滤器》Vue 中的全局过滤器是一个非常强大的工具，它可以对数据进行格

作者站长头像
站长
· 阅读数 21

前言

在 Vue 开发中，全局过滤器是一个强大而实用的工具，它能够对数据进行格式化和处理，为前端开发带来极大的便利。本文将深入探讨 Vue 中的全局过滤器的作用、用法以及一些巧妙的应用场景。

一、全局过滤器的作用

  1. 数据格式化
    • 日期格式化：在前端开发中，经常需要将日期格式化为特定的字符串形式。例如，将时间戳转换为 “年 - 月 - 日 时：分: 秒” 的格式。通过全局过滤器，可以轻松实现这样的日期格式化操作，使得页面上显示的日期更加清晰易读。
    • 货币格式化：当处理货币数据时，全局过滤器可以将数字格式化为货币格式，如添加货币符号、千位分隔符等。这样可以提高数据的可读性，并且在不同地区的用户面前呈现出合适的货币表示形式。
    • 文本格式化：可以对文本进行各种格式化操作，如首字母大写、去除首尾空格、截断过长的文本等。这些格式化操作可以使页面上的文本更加规范和美观。
  2. 数据过滤
    • 筛选数据：全局过滤器可以根据特定的条件对数据进行筛选。例如，可以过滤出数组中满足特定条件的元素，或者对对象的属性进行筛选。这样可以在不修改原始数据的情况下，根据不同的需求展示不同的数据子集。
    • 数据转换：有时候需要将一种数据类型转换为另一种数据类型。全局过滤器可以实现这样的转换，例如将字符串转换为数字、将布尔值转换为字符串等。这在处理不同数据源的数据时非常有用。
  3. 提高代码复用性
    • 全局过滤器可以在整个 Vue 应用中复用。一旦定义了一个全局过滤器，就可以在多个组件中使用它，无需在每个组件中重复编写相同的格式化或过滤逻辑。这大大提高了代码的复用性，减少了代码的冗余。

二、全局过滤器的用法

  1. 定义全局过滤器

    • 在 Vue 实例化之前，可以使用 Vue.filter () 方法来定义全局过滤器。以下是一个定义全局过滤器的示例：

      Vue.filter('dateFormat', function(value) {
  if (!value) return '';
  const date = new Date(value);
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  const hours = ('0' + date.getHours()).slice(-2);
  const minutes = ('0' + date.getMinutes()).slice(-2);
  const seconds = ('0' + date.getSeconds()).slice(-2);
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
});

    • 在上面的示例中，定义了一个名为 “dateFormat” 的全局过滤器，它接受一个时间戳作为参数，并将其格式化为 “年 - 月 - 日 时：分: 秒” 的字符串形式。

  2. 在模板中使用全局过滤器

    • 定义好全局过滤器后，可以在 Vue 的模板中使用它。在模板中，可以通过管道符 “|” 将过滤器应用于数据。以下是一个在模板中使用全局过滤器的示例：

      <template>
  <div>
    <p>当前时间：{{ currentTime | dateFormat }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: new Date().getTime(),
    };
  },
};
</script>

    • 在上面的示例中，在模板中使用了 “dateFormat” 过滤器来格式化当前时间的时间戳。

  3. 传递参数给全局过滤器

    • 全局过滤器还可以接受参数。在模板中，可以在过滤器后面添加参数，以传递给过滤器函数。以下是一个接受参数的全局过滤器的示例：

      Vue.filter('currencyFormat', function(value, currencySymbol) {
  if (!value) return '';
  return `${currencySymbol}${value.toFixed(2)}`;
});

      <template>
  <div>
    <p>金额：{{ amount | currencyFormat('$') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 1234.56,
    };
  },
};
</script>
      • 在上面的示例中，定义了一个名为 “currencyFormat” 的全局过滤器，它接受两个参数：一个是要格式化的数字，另一个是货币符号。在模板中，使用了这个过滤器，并传递了 “$” 作为货币符号。

三、全局过滤器的妙用

  1. 动态过滤数据

    • 全局过滤器可以根据不同的条件动态地过滤数据。例如，可以根据用户的选择或输入来动态地应用不同的过滤器。以下是一个动态过滤数据的示例：

    • <template>
  <div>
    <select v-model="filterType">
      <option value="all">全部</option>
      <option value="active">已激活</option>
      <option value="inactive">未激活</option>
    </select>
    <ul>
      <li v-for="user in users" :key="user.id">
        <span>{{ user.name }}</span>
        <span>{{ user.status | filterByStatus(filterType) }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
Vue.filter('filterByStatus', function(status, filterType) {
  if (filterType === 'all') return status;
  if (filterType === 'active' && status === 'active') return status;
  if (filterType === 'inactive' && status === 'inactive') return status;
  return '';
});

export default {
  data() {
    return {
      filterType: 'all',
      users: [
        { id: 1, name: '张三', status: 'active' },
        { id: 2, name: '李四', status: 'inactive' },
        { id: 3, name: '王五', status: 'active' },
      ],
    };
  },
};
</script>

    • 在上面的示例中，定义了一个名为 “filterByStatus” 的全局过滤器，它接受两个参数：一个是用户的状态，另一个是过滤类型。在模板中，使用了这个过滤器，并根据用户选择的过滤类型动态地过滤用户列表中的状态。

  2. 链式调用过滤器

    • 全局过滤器可以链式调用，即一个过滤器的输出可以作为另一个过滤器的输入。这样可以实现更复杂的数据格式化和过滤操作。以下是一个链式调用过滤器的示例：

    • <template>
  <div>
    <p>{{ text | trim | capitalize }}</p>
  </div>
</template>

<script>
Vue.filter('trim', function(value) {
  if (!value) return '';
  return value.trim();
});

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

export default {
  data() {
    return {
      text: '   hello world!   ',
    };
  },
};
</script>

    • 在上面的示例中，定义了两个全局过滤器：“trim” 和 “capitalize”。在模板中，使用了这两个过滤器的链式调用，先去除文本的首尾空格，然后将首字母大写。

  3. 自定义过滤器实现复杂逻辑

    • 全局过滤器可以实现复杂的逻辑，例如对数组进行排序、过滤和映射等操作。以下是一个实现复杂逻辑的全局过滤器的示例：

    • Vue.filter('arrayTransform', function(array, options) {
  if (!array ||!Array.isArray(array)) return [];
  let filteredArray = array;
  if (options.filter) {
    filteredArray = filteredArray.filter(item => options.filter(item));
  }
  if (options.sortBy) {
    filteredArray.sort((a, b) => {
      const valueA = a[options.sortBy];
      const valueB = b[options.sortBy];
      if (valueA < valueB) return -1;
      if (valueA > valueB) return 1;
      return 0;
    });
  }
  if (options.map) {
    filteredArray = filteredArray.map(item => options.map(item));
  }
  return filteredArray;
});

    • <template>
  <div>
    <ul>
      <li v-for="item in items | arrayTransform({ filter: item => item.price > 100, sortBy: 'price', map: item => ({ name: item.name, price: `$${item.price}` }) })">
        <span>{{ item.name }}</span>
        <span>{{ item.price }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品 1', price: 50 },
        { name: '商品 2', price: 120 },
        { name: '商品 3', price: 80 },
        { name: '商品 4', price: 150 },
      ],
    };
  },
};
</script>

    • 在上面的示例中，定义了一个名为 “arrayTransform” 的全局过滤器，它接受一个数组和一个选项对象作为参数。选项对象可以包含过滤、排序和映射等操作的配置。在模板中，使用了这个过滤器对一个商品数组进行过滤、排序和映射操作，只显示价格大于 100 的商品，并将价格格式化为货币形式。

四、总结

Vue 中的全局过滤器是一个非常强大的工具，它可以对数据进行格式化、过滤和转换等操作，提高代码的复用性和可读性。通过定义全局过滤器，可以在整个 Vue 应用中轻松地实现数据的格式化和处理，而无需在每个组件中重复编写相同的逻辑。在实际开发中，可以根据具体的需求灵活地使用全局过滤器，实现各种巧妙的应用场景，提高开发效率和用户体验。

转载自:https://juejin.cn/post/7406143548918251570
评论
请登录