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