使用 Vue.js 过滤器将数据转换为 KB、MB、GB、TB

在本文中，我们将学习如何使用 VueJS 中的过滤器将数据转换为给定的数据单元。过滤器是 Vue 组件提供的一项功能，可让您将格式设置和转换应用于模板动态数据的任何部分。组件的过滤器属性是一个对象。单个过滤器是一个接受一个值并返回另一个值的函数。返回的值是实际打印在 Vue.js 模板中的值。

可以使用过滤器将数据值缩写为 KB、MB、GB 或 TB。过滤器的逻辑将首先将该值除以 1024 的常数次方。例如，要转换以千字节为单位的值，假定常数为 1，类似地，对于以兆字节为单位的值，常数值为 2，依此类推。

下面的示例将演示这种方法：

示例：在此示例中，我们将字节的各种值转换为给定的数据单元给过滤器。

index.html

  
  


  
    
      GeeksforGeeks
    
    Bytes: {{d1}}B
  
    MegaBytes : 
      {{ d1 | bytes('MB') }}
    
  
    Bytes: {{d2}}B
  
    KiloBytes : 
      {{ d2 | bytes('KB') }}
    
  
    Bytes: {{d3}}B
  
    TeraBytes : 
      {{ d3 | bytes('TB') }}
    
  
    Bytes: {{d4}}B
  
    GigaBytes : 
      {{ d4 | bytes('GB') }}
    
  
  
  

应用程序.js

const parent = new Vue({
  el: "#parent",
  
  // Define the data to be converted
  data: {
    d1: 200000,
    d2: 1024,
    d3: 3532283533343,
    d4: 24322664648,
  },
  
  filters: {
    bytes: function (data, to) {
      const const_term = 1024;
  
      // Convert the values and concatenate
      // the appropriate unit
      if (to === "KB") {
        return (data / const_term).toFixed(3) + "KB";
      } else if (to === "MB") {
        return (data / const_term ** 2).toFixed(3) + "MB";
      } else if (to === "GB") {
        return (data / const_term ** 3).toFixed(3) + "GB";
      } else if (to === "TB") {
        return (data / const_term ** 4).toFixed(3) + "TB";
      } else {
        return "Please pass valid option";
      }
    },
  },
});

输出：