ayutaz/main.html

## main.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="main.css">
    <title>calculator</title>
</head>
<body>
    <div class="ui manin continer">
        <div id="app">
            <div class="titile">
                <h1>電卓アプリ</h1>
                <h5>現在日時 : {{now}}</h5>
            </div>
            <div class="ui two column centered grid top">
                <div class="column">
                    <div class="ui form">
                        <div class="two fields">
                            <div class="field">
                                <label>入力された式</label>
                                <input readonly="" type="text" v-model="formula">
                            </div>
                            <div class="field">
                                <label>答え</label>
                                <input readonly="" type="text" v-model="ans">
                            </div>
                            <button class="ui button" v-on:click="calc('C')">C</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui two column centered grid">
                <table class="ui celled table column">
                    <tbody>
                        <tr v-for="row in items">
                            <td v-for="item in row">
                                <button class="ui huge button" v-on:click="calc(item)">{{item}}</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </divn>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./main.js"></script>
    <!-- semantic.css  -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
</body>
</html>

## main.js
var app = new Vue({
    el: '#app',
    data: {
        ans: '',
        formula:'',
        now: new Date(),
        cal_history: [
            '1+2=3',
            '5+8=13',
        ],
        cal_times:[],
        items: [
            [7, 8, 9,'-'],
            [4, 5, 6,'/'],
            [1, 2, 3, '*'],
            [0,'00','+','=']
        ],
    },
    computed: {
        response: function () {
            return this.ans ? eval(this.formula) : "";
        }
    },
    methods: {
        calc: function (cmd) {
            console.log(cmd);
            if (cmd === '=') {
                // history.pushState(cmd);
                this.ans = eval(this.formula);
            } else if (cmd === '0') {
                this.ans = cmd;
            } else if (cmd === 'C'){
                this.ans = 0;
                this.formula = 0;
            }else {
                this.formula += cmd;
            }
        }
    },
});
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="main.css">
	<title>calculator</title>
	</head>
	<body>
	<div class="ui manin continer">
	<div id="app">
	<div class="titile">
	<h1>電卓アプリ</h1>
	<h5>現在日時 : {{now}}</h5>
	</div>
	<div class="ui two column centered grid top">
	<div class="column">
	<div class="ui form">
	<div class="two fields">
	<div class="field">
	<label>入力された式</label>
	<input readonly="" type="text" v-model="formula">
	</div>
	<div class="field">
	<label>答え</label>
	<input readonly="" type="text" v-model="ans">
	</div>
	<button class="ui button" v-on:click="calc('C')">C</button>
	</div>
	</div>
	</div>
	</div>
	<div class="ui two column centered grid">
	<table class="ui celled table column">
	<tbody>
	<tr v-for="row in items">
	<td v-for="item in row">
	<button class="ui huge button" v-on:click="calc(item)">{{item}}</button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</divn>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="./main.js"></script>
	<!-- semantic.css -->
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
	</body>
	</html>
	var app = new Vue({
	el: '#app',
	data: {
	ans: '',
	formula:'',
	now: new Date(),
	cal_history: [
	'1+2=3',
	'5+8=13',
	],
	cal_times:[],
	items: [
	[7, 8, 9,'-'],
	[4, 5, 6,'/'],
	[1, 2, 3, '*'],
	[0,'00','+','=']
	],
	},
	computed: {
	response: function () {
	return this.ans ? eval(this.formula) : "";
	}
	},
	methods: {
	calc: function (cmd) {
	console.log(cmd);
	if (cmd === '=') {
	// history.pushState(cmd);
	this.ans = eval(this.formula);
	} else if (cmd === '0') {
	this.ans = cmd;
	} else if (cmd === 'C'){
	this.ans = 0;
	this.formula = 0;
	}else {
	this.formula += cmd;
	}
	}
	},
	});