vue动态改变背景图片demo分享
网络编程 2021-07-04 16:46www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇vue动态改变背景图片demo分享,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
如下所示:
<!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 } }, puted:{ } }) </script> </body> </html>
以上这篇vue动态改变背景图片demo分享就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程