Vue.js中在v-for循环内格式化长数字：保留两位小数加千分位逗号

Since you can't use vue-numeric due to not using ES6, let's implement a custom formatting method directly in your Vue component that handles both decimal precision and thousand separators. Here's a step-by-step fix:

1. Add a Formatting Method to Your Vue Component #

Add a formatDifficulty method in the methods section. This function works with ES5, takes the raw numeric value, rounds it to 2 decimal places, and adds comma separators for thousands:

methods: {
  formatDifficulty: function(num) {
    // Handle cases where data isn't loaded yet or isn't a number
    if (typeof num !== 'number') {
      return 'N/A';
    }
    // Round to 2 decimal places first
    var fixedNum = num.toFixed(2);
    // Split into integer and decimal parts
    var parts = fixedNum.split('.');
    // Add thousand separators to the integer part
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    // Join back and return the formatted string
    return parts.join('.');
  }
}

2. Update Your Template to Use the Method #

Modify the line where you display difficulty to call the new method instead of rendering the raw value:

<a v-if="poolAPIData[pool.tag]" v-bind:href="pool.url">
  <i class="fa fa-book fa-fw"></i>{{pool.tag}} <br>
  HR| {{poolAPIData[pool.tag].hashrate}} <br>
  NHR| {{poolAPIData[pool.tag].network_hashrate}}<br>
  NWD| {{ formatDifficulty(poolAPIData[pool.tag].difficulty) }} 
</a>

3. Fix Your AJAX Request (Critical!) #

Your original code assigns the jQuery XHR object directly to poolAPIData, which will cause errors when trying to access properties like hashrate or difficulty. Instead, only assign the actual data in the success callback (using .done() for better readability):

// Inside your component's mounted or created hook
$.ajax({
  dataType: "json",
  url: 'https://coinstop.me/api/'
})
.done(function(data) {
  this.poolAPIData = data;
}.bind(this)) // Bind context to access Vue's `this` correctly
.fail(function(error) {
  console.error('Failed to load pool data:', error);
});

Full Component Example #

Putting it all together, your component will look like this:

<template>
  <li v-for="(poolList, poolType) in poolConfig"> 
    <a href="#"><i class="fa fa-linux fa-fw"></i> {{poolType}}<span class="fa arrow"></span></a> 
    <ul class="nav nav-third-level" v-for="pool in poolList"> 
      <li style="font-size:90%;"> 
        <a v-if="poolAPIData[pool.tag]" v-bind:href="pool.url">
          <i class="fa fa-book fa-fw"></i>{{pool.tag}} <br>
          HR| {{poolAPIData[pool.tag].hashrate}} <br>
          NHR| {{poolAPIData[pool.tag].network_hashrate}}<br>
          NWD| {{ formatDifficulty(poolAPIData[pool.tag].difficulty) }} 
        </a> 
      </li> 
    </ul> 
  </li>
</template>

<script>
module.exports = {
  data: function() {
    return {
      poolAPIData: {},
      poolConfig: {} // Ensure your poolConfig is defined here or imported
    };
  },
  methods: {
    formatDifficulty: function(num) {
      if (typeof num !== 'number') {
        return 'N/A';
      }
      var fixedNum = num.toFixed(2);
      var parts = fixedNum.split('.');
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      return parts.join('.');
    }
  },
  mounted: function() {
    $.ajax({
      dataType: "json",
      url: 'https://coinstop.me/api/'
    })
    .done(function(data) {
      this.poolAPIData = data;
    }.bind(this))
    .fail(function(error) {
      console.error('Error fetching pool API data:', error);
    });
  }
};
</script>

This solution is fully ES5-compatible, requires no external libraries, and handles edge cases like unloaded data or non-numeric values gracefully.

内容的提问来源于stack exchange，提问作者ThatPurpleGuy