Vue實現(xiàn)進度條變化效果
更新時間：2021年09月03日 15:48:07 作者：qq_29914229
這篇文章主要為大家詳細介紹了Vue實現(xiàn)進度條變化效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本篇文章用Vue簡單實現(xiàn)進度條的變化，供大家參考，具體內(nèi)容如下
先上一波效果圖：
點擊減后，每次減百分之十
減到百分之0后，減操作按鈕隱藏
然后點擊重頭開始，恢復(fù)到初始狀態(tài)
二話不說，上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首頁</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<div class="process">
<div v-bind:style="{width: health+'%'}"></div>
</div>
<div class="bu">
<button v-on:click="sub" v-show="!eable">減</button>
<button v-on:click="reset">重頭開始</button>
</div>
</div>
js：
<script src="app.js"></script>
</body>
</html>
new Vue({
el:"#vue-app",
data:{
health :100,
eable : false
},
methods :{
sub : function () {
this.health -= 10;
if(this.health <= 0){
this.eable = true;
}
},
reset : function () {
this.health = 100;
this.eable = false;
}
}
});
CSS:
.process{
width: 250px;
height: 30px;
margin: 0 auto;
border: black 4px solid;
}
.process div{
height: 30px;
background: red;
}
.bu{
width: 250px;
margin: 20px auto;
}
.bu button{
margin: 0 20px;
}
簡單的實現(xiàn)思路如下：
用v-bind:style將width的值與health綁定，減的時候每次減10，減到0的時候，將減這個按鈕隱藏
隱藏的時候可以使用一個狀態(tài)變量，根據(jù)v-show來控制，為true的時候顯示，為false的時候隱藏
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue+iview/elementUi實現(xiàn)城市多選
這篇文章主要介紹了vue+iview/elementUi實現(xiàn)城市多選，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
本篇文章主要介紹了Vue利用canvas實現(xiàn)移動端手寫板的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vue語法之render函數(shù)和jsx的基本使用,在Vue中是支持jsx的,凡是我們是比較少在Vue中使用jsx的,jsx在react中使用的更加廣泛,因此在這里我簡單介紹一下jsx的基本使用，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了淺談vue 單文件探索，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue3.0 beta 版本已經(jīng)發(fā)布有一段時間了，今天這篇文章就帶大家體驗一下，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
vue elementUi+sortable.js實現(xiàn)嵌套表格拖拽問題
這篇文章主要介紹了vue elementUi+sortable.js實現(xiàn)嵌套表格拖拽問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了探秘vue-rx 2.0(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本文主要介紹了Vue3中響應(yīng)式解構(gòu)props的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
本文主要介紹了elementUI?el-radio?無法點擊的問題解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
解決vue項目運行提示W(wǎng)arnings while compiling.警告的問題
這篇文章主要介紹了解決vue項目運行提示W(wǎng)arnings while compiling.警告的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09