SoFunction
Updated on 2025-03-02

Vue dynamically changes background image demo sharing

Vue dynamically changes background image demo sharing

Updated: September 13, 2018 09:55:18 Author: Brother Hi Mao
Today, the editor will share a demo of the vue dynamic background change image, which has good reference value and hope it will be helpful to everyone. Let's take a look with the editor

As shown below:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/" ></script>
<style>
#bag{
width: 200px;
height: 500px;
margin: 0 auto;
background: url(img/) center no-repeat;
background-size: 80%;
}
.burst{
background-image: url(img/) !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 >
<!--Current picture-->
<div  :class='{burst:ended}'></div>

<!--Progress status-->
<div >
<div :style="{width:health + '%'}"></div>
</div>

<!--Control buttons-->
<div >
<button @click='punch' v-show='!ended'>Knock hard</button>

<button @click='restart'>restart</button>
</div>
</div>

<script>
new Vue({
el:"#app",
data:{
health:100,
ended:false
},
methods:{
punch:function(){
 -= 10;

if (<=0) {
 = true

}
},
restart:function(){
 = 100;
 = false
}
},
computed:{

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

The above vue dynamic background image demo sharing is the full content shared by the editor. I hope it can give you a reference and I hope you can support me more.

  • vue
  • background
  • picture

Related Articles

  • Detailed explanation of the injection and use of global objects based on Vue3+TypeScript

    This article mainly introduces the injection and use of global objects based on Vue3+TypeScript. This essay mainly introduces the injection and use of global objects based on Vue3+TypeScript. Friends who need it can refer to it.
    2022-09-09

  • Detailed explanation of webpack+ implementation of componentization

    The development experience of vue is quite pleasant. First of all, the documentation is very friendly, so it will be faster to get started. Secondly, with webpack and vue-loader, each page is a .vue file, which is very convenient to write. Therefore, it is very suitable for component development. In this article, let’s take a look at how webpack+ can achieve componentization.
    2016-10-10

  • Use echarts histogram to implement select drop-down refresh data

    This article mainly introduces the use of echarts bar chart to realize select pull-down refresh data, which is of good reference value and hope it will be helpful to everyone. If there are any mistakes or no complete considerations, I hope you will be very grateful for your advice
    2022-10-10

  • How to report Google Analytics event statistics in Vue custom directive

    We often need to access statistics services to facilitate operation. This article mainly introduces the method of reporting Google Analytics event statistics by custom Vue instructions. The editor thinks it is quite good. I will share it with you now and give you a reference. Let's take a look with the editor
    2019-02-02

  • The environment configuration and construction process of Vue3 component library

    This article mainly introduces the environment configuration and construction process of Vue3 component library. The Vue3 component library is developed using Vite+Ts, so we need to install typescript and vue3. At the same time, the project will use Less to manage the component library style. Friends who need it can refer to it.
    2023-03-03

  • Vue implements two routing permission control methods

    Routing permission control is often used in the background management system, which restricts permissions to pages that different business personnel can access. This article mainly introduces two types of Vue routing permission control, which has certain reference value. If you are interested, you can learn about it.
    2021-10-10

  • Vue implements verification code function

    This article mainly introduces the Vue verification code function in detail. The sample code in the article is introduced in detail and has a certain reference value. Interested friends can refer to it.
    2019-12-12

  • Vue implementation demo code to add tags

    This article mainly introduces the sample code for adding tag demos to vue. The editor thinks it is quite good. I will share it with you now and give you a reference. Let's take a look with the editor
    2017-01-01

  • Vue implements simple notepad

    This article mainly introduces the simple notepad for Vue implementation. The sample code in the article is introduced in detail and has a certain reference value. Interested friends can refer to it.
    2022-04-04

  • vue-element-admin to turn off eslint's verification method

    This article mainly introduces the verification method of vue-element-admin to close eslint, which is of good reference value and hopes it will be helpful to everyone. If there are any mistakes or no complete considerations, I hope you will be very grateful for your advice
    2022-08-08

Latest Comments