demo7.html
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml" 3 xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Vue Demo</title> 7 <!--自选版本--> 8 <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>--> 9 <!-- 开发环境版本，包含了有帮助的命令行警告 --> 10 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 11 <!-- 生产环境版本，优化了尺寸和速度 --> 12 <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>--> 13 <link href="style.css" rel="stylesheet"> 14 </head> 15 <body> 16 <div id="app"> 17 <h2>综合Demo</h2> 18 <!--图片--> 19 <div id="bag" v-bind:class="{burst:ended}"></div> 20 21 <!--进度情况--> 22 <div id="bag-health"> 23 <div v-bind:style="{ health + '%' }"> 24 </div> 25 </div> 26 27 <h3 v-show="ended" align="center"> 28 沙袋被你打坏了！ 29 </h3> 30 <!--控制按钮--> 31 <div id="controls"> 32 <button v-on:click="punch" v-show="!ended">使劲敲打</button> 33 <button v-on:click="restart">重新开始</button> 34 </div> 35 36 </div> 37 <script src="app.js"></script> 38 </body> 39 </html>
app.js
var app = new Vue({ el: '#app', data: { health: 100, ended: false, }, methods: { punch: function () { this.health -= 25; if (this.health <= 0) { this.ended = true; // alert("被你打坏了！你真棒！") } }, restart: function () { this.health = 100; this.ended = false; } }, computed: {} })
style.css
1 #bag { 2 width: 200px; 3 height: 500px; 4 margin: 0 auto; 5 background: url("pic/sha1.png") center no-repeat; 6 background-size: 80%; 7 } 8 9 #bag.burst { 10 background-image: url("pic/sha2.png"); 11 } 12 13 #bag-health { 14 width: 200px; 15 border: 2px #000 solid; 16 margin: 0 auto 20px auto; 17 } 18 19 #bag-health div { 20 height: 20px; 21 background: greenyellow; 22 } 23 24 #controls { 25 width: 200px; 26 margin: 0 auto; 27 } 28 29 #controls button { 30 margin-left: 20px; 31 }
截图：
