<!doctype html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<title>BootstrapVue</title>
</head>
<body>
Hello World!
<div id="app" >
<div >
<div >
<b-alert show >小銭の計算</b-alert>
<div>
<p>いくら</p>
<p>
<input type="number" name="price" v-model=price>
<b-button @click="calc()">計算</b-button>
</p>
</div>
</div>
</div>
<div >
<div >
500円 : {{yen500}} 枚
</div>
<div >
100円 : {{yen100}} 枚
</div>
<div >
50円 : {{yen50}} 枚
</div>
<div >
10円 : {{yen10}} 枚
</div>
<div >
5円 : {{yen5}} 枚
</div>
<div >
1円 : {{yen1}} 枚
</div>
</div>
</div>
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="script.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
data: {
price: 0,
yen500: 0,
yen100: 0,
yen50: 0,
yen10: 0,
yen5: 0,
yen1: 0,
},
methods: {
calc: function(event) {
change = this.price;
this.yen500 = Math.floor(change / 500);
change %= 500;
this.yen100 = Math.floor(change / 100);
change %= 100;
this.yen50 = Math.floor(change / 50);
change %= 50;
this.yen10 = Math.floor(change / 10);
change %= 10
this.yen5 = Math.floor(change / 5);
this.yen1 = change % 5;
}
}
})
/* Styles go here */