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

2019-11-19 12:57:25

字体：大中小

来源：转载

供稿：网友

如下所示：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/vue.js" ></script><style>#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;}</style></head><body><div id="app"><!--当前图片--><div id="bag" :class='{burst:ended}'></div><!--进度情况--><div id="bag-health"><div :style="{width:health + '%'}"></div></div><!--控制按钮--><div id="controls"><button @click='punch' v-show='!ended'>使劲敲</button><button @click='restart'>重新开始</button></div></div><script>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:{}})</script></body></html>

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

上一篇：node中的cookie的具体使用

下一篇：vue vue-Router默认hash模式修改为history需要做的修改详解