1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <link rel="stylesheet" type="text/css" href="vue.css">
7 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
8 </head>
9 <body>
10 <div id="vue-app">
11 <!--图片-->
12 <div id="bag" v-bind:class="{burst:ended}"></div>
13
14
15 <!-- 进度情况 --->
16 <div id="bag-health">
17 <div v-bind:style="{width:health+‘%‘}"></div>
18
19 <!--<div style="width: 60%;"></div>-->
20 </div>
21
22 <!--控制按钮-->
23 <div id="">
24 <button v-on:click="punch" v-show="!ended">用力敲</button>
25 <button v-on:click="restart">重新开始</button>
26 </div>
27 </div>
28
29 <script src="app.js"></script>
30 </body>
31 </html>
HTML
1 new Vue({
2 el:‘#vue-app‘,
3 data:{
4 health:0,
5 ended:false
6 },
7 methods:{
8 punch:function(){
9
10 this.health+=10;
11 if(this.health >= 100){
12 this.ended=true;
13 }
14 },
15 restart:function(){
16
17 this.health=0;
18 this.ended=false;
19 }
20 },
21 computed:{
22
23 }
24 })
Vue.js
#bag{
width:200px;
height: 500px;
margin: 0 auto;
background:url(bag.png) center no-repeat;
background-size:80%;
background-color:orange;
}
#bag.burst{
background:url("") center no-repeat;
}
#bag-health{
width: 200px;
border:2px #000 solid;
margin 0 auto 20px auto;
}
#bag-health div{
height:20px;
background:crimson;
}
#controls{
width:120px;
margin:0 auto;
}
CSS
原文地址：https://www.cnblogs.com/yanxiatingyu/p/9459493.html
时间： 2024-10-08 06:39:48