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


Posted in Javascript onSeptember 13, 2018

如下所示:

<!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分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
jquery ui对话框实例代码
May 10 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 #Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 #Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 #Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 #Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 #Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 #Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 #Javascript
You might like
php mysql索引问题
2008/06/07 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
Python实现的tab文件操作类分享
2014/11/20 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
python打开音乐文件的实例方法
2020/07/21 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
Python 代码调试技巧示例代码
2020/08/11 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
什么是servlet链?
2014/07/13 面试题
《乡愁》教学反思
2014/02/18 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
服装设计专业求职信
2014/06/16 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
医生见习报告范文
2014/11/03 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers