vue動(dòng)態(tài)改變背景圖片demo分享
更新時(shí)間：2018年09月13日 09:55:18 作者：Hi毛哥哥
今天小編就為大家分享一篇vue動(dòng)態(tài)改變背景圖片demo分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<!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">
<!--當(dāng)前圖片-->
<div id="bag" :class='{burst:ended}'></div>
<!--進(jìn)度情況-->
<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動(dòng)態(tài)改變背景圖片demo分享就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue3+TypeScript的全局對(duì)象的注入和使用詳解
這篇文章主要介紹了基于Vue3+TypeScript的全局對(duì)象的注入和使用,本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對(duì)象的注入和使用，需要的朋友可以參考下2022-09-09
webpack+vue.js實(shí)現(xiàn)組件化詳解
vue的開發(fā)體驗(yàn)還是比較愉悅的。首先文檔非常友好，所以上手會(huì)比較快。其次，配合webpack和vue-loader，每個(gè)頁面都是一個(gè).vue文件，寫起來很方便。所以很適合做組件化開發(fā)，這篇文章我們就來一起看看webpack+vue.js如何實(shí)現(xiàn)組件化。2016-10-10
使用echarts柱狀圖實(shí)現(xiàn)select下拉刷新數(shù)據(jù)
這篇文章主要介紹了使用echarts柱狀圖實(shí)現(xiàn)select下拉刷新數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法
我們經(jīng)常需要接入統(tǒng)計(jì)服務(wù)以方便運(yùn)營，這篇文章主要介紹了Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vue3 組件庫的環(huán)境配置搭建過程,使用 Vite+Ts 開發(fā)的是 Vue3 組件庫,所以我們需要安裝 typescript、vue3,同時(shí)項(xiàng)目將采用 Less 進(jìn)行組件庫樣式的管理，需要的朋友可以參考下2023-03-03
Vue實(shí)現(xiàn)兩種路由權(quán)限控制方式
路由權(quán)限控制常用于后臺(tái)管理系統(tǒng)中，對(duì)不同業(yè)務(wù)人員能夠訪問的頁面進(jìn)行一個(gè)權(quán)限的限制。本文主要介紹了兩種Vue 路由權(quán)限控制，具有一定的參考價(jià)值，感興趣的可以了解一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
vue實(shí)現(xiàn)添加標(biāo)簽demo示例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)添加標(biāo)簽demo示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡易記事本，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue-element-admin關(guān)閉eslint的校驗(yàn)方式
這篇文章主要介紹了vue-element-admin關(guān)閉eslint的校驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08