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
}
},
computed:{

}
})
</script>
</body>
</html>

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

赞 (0)

相关推荐

  • Vue项目中设置背景图片方法

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

  • vue 动态改变静态图片以及请求网络图片的实现方法

    在本身的项目中需要动态请求后端图片 一般需要在created中写因为beforeCreate的时候图片过不来的,如果想在这时候请求数据那么图片的地址我们就要存在一个地方.可以是本地也可以是vuex中 静态图片想要动态的添加或者改变我们需要改变图片的目录结构 把图片放在static中然后 imgUrl : ['/static/clinical.png','/static/nursing.png','/static/function.png','/static/test.png','/static/

  • vue 动态绑定背景图片的方法

    vue动态绑定背景图片的方法,具体介绍如下所示: 1.backgroundImage && 三目运算符 <div class="right-con" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}"> </div> 1.backgroundImage <div

  • 解决vuejs项目里css引用背景图片不能显示的问题

    解决:build->utils.js里,修改:增加 publicPath:'../../', if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:'../../', fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } 以上这篇解决vuejs项目里css引用背景图片

  • 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: 50

  • jquery动态切换背景图片的简单实现方法

    本文实例讲述了jquery动态切换背景图片的简单实现方法.分享给大家供大家参考,具体如下: (function() { var bgCounter = 0, backgrounds = [ "Images/BACKGROUND_1_TEST.png", "Images/BACKGROUND_2_TEST.png", "Images/BACKGROUND_3_TEST.png" ]; function changeBackground() { bg

  • 基于vue 动态加载图片src的解决方法

    基于vue 动态加载图片src的解决方法

    好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

  • Vue动态加载图片在跨域时无法显示的问题及解决方法

    写在前面 小记,就简单写了 .问题:VUE开发时因为要访问后端的接口所以要配置请求转发,如果直接转发全部请求,那么VUE动态绑定的src也会转发到后端,因为图片在前端,所以会收到404 NOT FOUND的报错. 常规的请求转发 在vue-cli3内,直接编辑vue.config.js,如下: let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pa

  • 使用js操作css实现js改变背景图片示例

    1.用JS定义一个图片数组,里面存放你想要随机展示的图片 复制代码 代码如下: ar imgArr=["http://www.jb51.net/logo_cn.png","http://www.jb51.net/baidu_sylogo1.gif","http://www.jb51.net/news/uploadImg/20120111/20120111081906_79.jpg", "http://www.jb51.net/news/

  • 基于jquery实现的鼠标滑过按钮改变背景图片

    复制代码 代码如下: $(document).ready(function () { //按钮样式切换 $("#btFeedBack").hover( function () { $(this).removeClass("btFeed").addClass("btFeedhover"); }, function () { $(this).removeClass("btFeedhover").addClass("btF

  • javascript动态改变img的src属性图片不显示的解决方法

    首先讲下这个bug的出现的情况,页面中有 复制代码 代码如下: <a href="javascript:void(0)" onclick="document.getElementById('current').src='images/001.jpg';"> 这么一个a标签,onclick中的JS代码就是改变id为current的img标签的src属性,以达到动态切换图片的效果.可是不幸的是:IE是动态改变的图片的路径,但是图片却不显示出来,得右键&quo

  • Vue登录页面的动态粒子背景插件实现

    Vue登录页面的动态粒子背景插件实现

    目录 动态粒子效果如下: 安装插件 动态粒子效果如下: 安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入 import VueParticles from 'vue-particles' Vue.use(VueParticles) 在vue文件中使用 <vue-particles color="#409EFF" :particleOpacity="0.7" :particlesNumber=&q

  • javascript设置页面背景色及背景图片的方法

    本文实例讲述了javascript设置页面背景色及背景图片的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus

随机推荐