vue.js数字简化 万转化k显示

在我们项目中如果用到数值过长 在页面显示多少有点沉余,以下有两种办法我们来解决这个问题
1.
 vue 过滤器 | (filters)

<template>
  <p>{{ 要过滤的数值 | userNums }}</p>
</template>

  export default {

    filters: {
        userNums(num) {
          return num < 10000 ? num: (num/ 1000).toFixed(1) + 'k'
        }
    },

  }

2.
  使用自己封装的方法 numberFormat
  <template>
    <p>{{ numberFormat(要过滤的数值) }}</p>
  </template>
  
  export default{
    methods:{
      
numberFormat(num){
        if(num >= 10000){
          return this.toFixed1(num / 1000) + 'k'
        }else{
          return num
        }
      },
       toFixed1(num) {
            num = num.toString()
            const index = num.indexOf('.')
            if (index !== -1) {
              num = num.substring(0, index + 2)
              return parseFloat(num).toFixed(1)
            } else {
              num = num.substring(0)
              return parseFloat(num)
            }
        },
    }
  }
  

 

posted @ 2021-05-31 15:37  Yi只猴  阅读(1294)  评论(0编辑  收藏  举报