Html 代碼：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./style.css" /> <script src="./vue.js"></script> <title>Punching Bag</title> </head> <body> <div id="app"> <div id="bag" v-bind:class="{burst:ended}"></div> <div id="bagHealthBorder"> <div id="bagHealth" v-bind:style="{width:health+'%'}"></div> </div> <div id="controls"> <button v-on:click="punch" v-bind:disabled="ended">Punch</button> <button v-on:click="restart">Restart</button> </div> </div> <script src="app.js"></script> </body> </html>
CSS 代碼：
#bag { width: 200px; height: 500px; margin: 20px auto; background-image: url(./img/bag.png); } #bag.burst { background-image: url(./img/bag-burst.png); } #bagHealthBorder { width: 200px; height: 20px; border: 2px solid black; margin: 20px auto; } #bagHealth { background-color: #cb0025; height: 20px; } #controls { width: 120px; margin: 20px auto; }
JavaScript 代碼：
new Vue({ el: '#app', data: { health: 100, ended: false, }, methods: { punch: function () { this.health -= 10 if (this.health <= 0) { this.ended = true } }, restart: function () { this.health = 100 this.ended = false }, }, })