0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

vue.js 小数点が省略されたが、表示させたい!(例えば、10->10.0で表示したい)

Last updated at Posted at 2020-11-27

jsは整数の場合、小数が自動的に省略されたことがついに気づきました。

例えば、10ではなく、10.0で画面で表示したい場合、
postmanでPrettyだと、10で表示しています。「あれ?」と思って、Rawで確認すると、10.0になっています。

vue.jsでどうやって10.0で表示できるの?
色々調べて、下記のコードでできた!

// 負でない整数場合、小数一桁「0]を補足する
var getFloatStr = function (num) {
        if (!/\./.test(num)) {
          num += '.0'
        }
        num = num.match(/\d+\.\d{1}/)[0]
        // console.log(num)
        return num
      }

スクリーンショット 2020-11-27 13.27.04.png

コードの全文

<template>
    <b-card header="結果" bg-variant="light" class="text-center" style="margin-bottom:10px;">
       <b-card-text>
          <div>
          <input style="display:none" type="text" v-model="childrenMessage">
            <element-table
              ref="table"
              :data="data"
              :columns="columns"
              />
            </div>
      </b-card-text>
    </b-card>
</template>
<script>

export default {
  props: ['message'],
  data () {
    return {
      childrenMessage: '',
      columns: [
        [
          {
            title: '順位',
            field: 'ranking'
          },
          {
            title: '点数',
            field: 'score'
          },
          {
            title: '名前',
            field: 'name'
          },
          {
            title: 'メモ',
            field: 'memo'
          }
        ]
      ],
      data: []
    }
  },
  created () {
    this.childrenMessage = this.message
  },
  watch: {
    message (val) {
      const result = this.message

      const arrResult = []
      const objResult = {}

      // 負でない整数場合、小数一桁「0]を補足する
      var getFloatStr = function (num) {
        if (!/\./.test(num)) {
          num += '.0'
        }
        num = num.match(/\d+\.\d{1}/)[0]
        // console.log(num)
        return num
      }
      for (var i = 0; i < result.length; i++) {
        objResult['ranking'] = result[i]['ranking']
        objResult['score'] = getFloatStr(JSON.stringify(result['score']))
        objResult['name'] = result[i]['name']
        objResult['memo'] = result[i]['memo']
        arrResult.push(objResult)
      }
      this.data = arrResult
    }
  }
}
</script>

参考先:
1、js 输入int类型数字后自动在后面加.00,输入double型保留小数点后两位

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?