Vue.js--实践Demo

• HTML

    
 

    
    

        

    
    
    

        使劲敲
        从新开始
    

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