提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue之综合Demo：打沙袋

Vue Demo 综合
2023-09-11 14:19:56 时间

 

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="{width: 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 }

 

截图：

 

 

相关文章