Question

我有一个来自json的vue js数据值。我在v-for prop中使用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参数，每3位数有2个小数位和逗号。

Answer 1

您可以使用通过filter运行给定值的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({
  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'
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16"></script>

<div id="app">
  <p>{{ poolAPIData['nul'].difficulty | currency }}</p>
  <p>{{ poolAPIData['str'].difficulty | currency }}</p>
  <p>{{ poolAPIData['num'].difficulty | currency }}</p>
</div>

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

1 个答案: