使用 Vue.js 中的过滤器以 Kilo(K) 和 Million(M) 为单位的缩写数字

在本文中，我们将学习如何在 VueJS 中使用过滤器来缩写数字。过滤器是 Vue 组件提供的一项功能，可让您将格式设置和转换应用于模板动态数据的任何部分。

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

可以使用过滤器执行以千 (K) 和百万 (M) 为单位的数字缩写。我们首先检查所有数字是否小于一百万或更大。这可以通过使用简单的数学逻辑或通过将数字转换为字符串来计算长度来完成。如果数字小于一百万，则我们将其除以 1000，否则，我们将数字除以 1000000 并返回它的下限值以及所需的缩写。

例子：

index.html

    
    


    
        Number1: 
          {{number1}}
        
        
          Abbreviated Number : 
          {{ number1 | abbr }}
        
        
          Number2: {{number2}}
        
        
          Abbreviated Number : 
          {{ number2 | abbr }}
        
    
    

应用程序.js

const parent = new Vue({
    el: '#parent',
    data: {
        number1: 123768,
        number2: 7549653906
    },
  
    filters: {
        abbr: function(num) {
            if (String(num).length < 7) {
                return Math.floor(num/1000) + 'K';
            } else {
                return Math.floor(num/1000000) + 'M';
            }
        }
    }
})

输出：