<div id="vue-app">
<!-- 图片-->
<div id="bag" v-bind:class="{burst:ending}"></div>
<!--进度情况-->
<div id="bag-health">
<div v-bind:style="{width:health + '%'}"></div>
</div>
<!-- 控制按钮-->
<div id="controls">
<button v-on:click="punch" v-show="!ending">使劲敲</button>
<button v-on:click="restart">从新开始</button>
</div>
</div>
new Vue({
el:'#vue-app',
data:{
health:100,
ending:false,
},
methods:{
punch:function()
{
this.health-=10
if(this.health <= 0)
{
this.ending = true
}
},
restart:function()
{
this.health = 100
this.ending = false
}
},
computed:
{
}
});
#bag{
width: 500px;
height: 400px;
margin: 0 auto;
background: url("Lib/测试.jpg") center no-repeat;
background-size: 80%;
}
#bag-health
{
width: 200px;
border: 2px #000 solid;
margin: 0px auto 20px auto;
}
#bag-health div
{
height: 20px;
background: crimson;
}
#controls
{
width: 200px;
margin: 0px auto;
}
#controls button
{
margin-left: 20px;
}
#bag.burst
{
background: url("Lib/测试_hl.jpg");、
}
网友评论