标签：spl styles hide eal 20px lin bsp button alt
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>
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 })
#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; }
标签：spl styles hide eal 20px lin bsp button alt
原文地址：https://www.cnblogs.com/yanxiatingyu/p/9459493.html
