vue改变html的背景,vue动态改变背景图片demo分享

如下所示：

#bag{

width: 200px;

height: 500px;

margin: 0 auto;

background: url(img/piao11.jpg) center no-repeat;

background-size: 80%;

}

.burst{

background-image: url(img/piao12.jpg) !important;

background-size: 80%;

}

#bag-health{

width: 200px;

border: 2px solid #000000;

margin: 0 auto 20px auto;

}

#bag-health div{

height: 20px;

background: crimson;

}

#controls{

width: 200px;

margin: 0 auto;

}

#controls button{

margin-left: 23px;

}

使劲敲

重新开始

new vue({

el:"#app",

data:{

health:100,

ended:false

},

methods:{

punch:function(){

this.health -= 10;

if (this.health<=0) {

this.ended = true

}

},

restart:function(){

this.health = 100;

this.ended = false

}

},

computed:{

}

})

以上这篇vue动态改变背景图片demo分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持萬仟网。