データ量の単位換算

# 単位換算

Vue.jsの基礎を学ぶために単位換算をしてみました。また、vuepressでマークダウン形式の記事に、Vueのコンポーネントを入れられるみたいなので、theme > global-componentsに単一ファイルコンポーネントMyUnitConverter.vueを作成して、ここで表示を試みています。

  • バイト(B) : 0
  • キロバイト(KB) : 0
  • メガバイト(MB) : 0
  • ギガバイト(GB) : 0
  • テラバイト(TB) : 0
  • ペタバイト(PB) : 0
  • エクサバイト(EB) : 0
  • ゼタバイト(ZB) : 0
  • ヨタバイト(YB) : 0

MyUnitConverter.vueのソースコードは以下の通りです。 算出プロパティではなく、関数でいちいち値を計算しています。for文を何回も使っていたりしていて、もっと良い方法がありそうですね。

<template>
  <div>
    <input type="number" v-model="number">
    <select v-model="selected">
      <option disabled value="">選択して下さい</option>
	    <option v-for="option in options" v-bind:value="option.name" v-bind:key="option.id">
        {{ option.name }}
      </option>
    </select>
    <input type="button" value="計算" v-on:click="calc">
    <span>
      <ul>
        <li v-for="option in options">
          {{ option.name }} : {{ option.value }}
       </li>
      </ul>
    </span>
  </div>
</template>

<script>
export default {
  name: 'MyUnitConverter',
  data() {
    return {
      number: 1,
      selected: '',
      selectedId: 0,
      options: [
        {id: 0, name: "バイト(B)", value: 0},
        {id: 1, name: "キロバイト(KB)", value: 0},
        {id: 2, name: "メガバイト(MB)", value: 0},
        {id: 3, name: "ギガバイト(GB)", value: 0},
        {id: 4, name: "テラバイト(TB)", value: 0},
        {id: 5, name: "ペタバイト(PB)", value: 0},
        {id: 6, name: "エクサバイト(EB)", value: 0},
        {id: 7, name: "ゼタバイト(ZB)", value: 0},
        {id: 8, name: "ヨタバイト(YB)", value: 0}
      ]
    }
  },
  methods: {
    calc: function () {
      if ( this.selected == '' ) {
        return
      }
      this.init()
      for (var i in this.options) {
        if (this.options[i].name == this.selected) {
          this.options[i].value = this.number
          this.selectedId = i
        }
      }
      for (var i in this.options) {
        this.options[i].value = this.options[this.selectedId].value * (1024 ** (this.selectedId - i))
      }
    },
    init: function () {
      this.selectedId = 0
      for (var i in this.options) {
        this.options[i].value = 0
      }
    }
  }
}
</script>

# 参考


AD