【Vue】eval電卓


概要

Vue.jsの入門として、何か作ってみたいという人向けです。

まず、通常のjsでeval電卓を作成し、Vue.jsを使って抽象化していきます。


実装

以下のような電卓を、最小構成で実装する。

index.htmlonClickイベントにより、calc関数が呼ばれ、

クリックされたボタンに応じた処理をします。

image.png


通常のjsの場合

buttonタグの羅列が冗長であることが確認できる。

とりあえず、動かしたい人は、cloneして下さい。


clone

git clone https://github.com/Naoto92X82V99/calc.git



index.html

<html>

<head>
<meta charset ="utf-8">
<script src="script.js"></script>
</head>
<body>
<table id="calcTable">
<tr>
<td colspan="3"><input type="text" id="output" value="0"></td>
<td><button value="C" onClick="calc('C')">C</button></td>
</tr>
<tr>
<td><button onClick="calc('7')">7</button></td>
<td><button onClick="calc('8')">8</button></td>
<td><button onClick="calc('9')">9</button></td>
<td><button onClick="calc('/')">/</button></td>
</tr>
<tr>
<td><button onClick="calc('4')">4</button></td>
<td><button onClick="calc('5')">5</button></td>
<td><button onClick="calc('6')">6</button></td>
<td><button onClick="calc('*')">*</button></td>
</tr>
<tr>
<td><button onClick="calc('1')">1</button></td>
<td><button onClick="calc('2')">2</button></td>
<td><button onClick="calc('3')">3</button></td>
<td><button onClick="calc('-')">-</button></td>
</tr>
<tr>
<td><button onClick="calc('0')">0</button></td>
<td><button onClick="calc('.')">.</button></td>
<td><button onClick="calc('+')">+</button></td>
<td><button onClick="calc('=')">=</button></td>
</tr>
</table>
</body>
</html>


script.js

function calc(cmd){

const element = document.getElementById('output')
const value = element.value

if(cmd === '='){
element.value = eval(value)
}else if(cmd === 'C'){
element.value = '0'
}else if(value === '0') {
element.value = cmd
}else{
element.value += cmd
}
}



Vue.jsの場合

上記実装において、buttonタグの羅列が冗長であるため、Vue.jsで書き直してみる。

v-forを使うことで、繰り返し処理を記述できる。

とりあえず、動かしたい人は、cloneして下さい。


clone

git clone https://github.com/Naoto92X82V99/vue-calc.git



index.html

<html>

<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<table id="app">
<tr>
<td colspan="3"><input type="text" v-model="output"></td>
<td><button value="C" v-on:click="calc('C')">C</button></td>
</tr>
<tr v-for="row in items">
<td v-for="item in row">
<button v-on:click="calc(item)">{{ item }}</button>
</td>
</tr>
</table>

<script src="script.js"></script>
</body>
</html>



script.js

var app = new Vue({ 

el: '#app',
data: {
output: '0',
items: [
['7', '8', '9', '/'],
['4', '5', '6', '*'],
['1', '2', '3', '-'],
['0', '.', '+', '=']
]
},
methods: {
calc: function (cmd) {
if(cmd === '='){
this.output = eval(this.output)
}else if(cmd === 'C'){
this.output = '0'
}else if(this.output === '0') {
this.output = cmd
}else{
this.output += cmd
}
}
}
})


まとめ

Vue.jsを用いて、最小構成でeval電卓を実装しました。

間違い・指摘等があればコメントお願いします。


参考文献