使用vue js减少小数位并添加逗号

Question

我有一个从json获取的vue js数据值。我在v-for道具中使用json使Li成为侧面导航。json中的对象之一很长。在for循环中使用vuejs解析它的最佳方法是什么？

我已经尝试了vue-numeric，但是由于我没有在该项目中使用ecmascript 6，所以我无法使其正常工作，我只想将其添加到主vue脚本中。

 data: {
            poolAPIData: {},


        },

<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|
                                    {{poolAPIData[pool.tag].difficulty}}



                                </a>


                            </li>

                        </ul>
                    </li>


 this.poolAPIData = $.ajax({
                    dataType: "json",
                    url: 'https://coinstop.me/api/',
                    success: (data => this.poolAPIData = data)
            })
                ;

我需要解析Difficulty参数，使其具有2个小数位，并且每3位逗号。

Answer 1

您可以使用一个过滤器，该过滤器通过来运行给定值Number#toLocaleString()，而maximumFractionDigits选项设置为2：

new Vue({
  // ...
  filters: {
    currency(amount) {
      const amt = Number(amount)
      return amt && amt.toLocaleString(undefined, {maximumFractionDigits:2}) || '0'
    }
  }
})

// usage in HTML: {{poolAPIData[pool.tag].difficulty | currency}}

new Vue({
  // ...
  filters: {
    currency(amount) {
      const amt = Number(amount)
      return amt && amt.toLocaleString(undefined, {maximumFractionDigits:2}) || '0'
    }
  }
})

// usage in HTML: {{poolAPIData[pool.tag].difficulty | currency}}

new Vue({
  el: '#app',
  data: {
    poolAPIData: {
      nul: {
        difficulty: null
      },
      str: {
        difficulty: "1234567.890123456789"
      },
      num: {
        difficulty: 1234567.890123
      }
    }
  },

  filters: {
    currency(amount) {
      const amt = Number(amount)
      return amt && amt.toLocaleString(undefined, {maximumFractionDigits:2}) || '0'
    }
  }
})