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 相关文章推荐
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP数据过滤的方法
2013/10/30 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
php图片添加水印例子
2016/07/20 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
python获取外网ip地址的方法总结
2015/07/02 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python实现小球弹跳效果
2019/05/10 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
高三自我鉴定范文
2013/10/19 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
护士自我鉴定总结
2014/03/24 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers