Vue.js--实践Demo

• HTML

<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>

• JS

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:
    {

    }
});

• CSS

#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");、
}