Vue實現(xiàn)進度條變化效果
更新時間：2021年09月03日 15:48:07 作者：qq_29914229
這篇文章主要為大家詳細介紹了Vue實現(xiàn)進度條變化效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本篇文章用Vue簡單實現(xiàn)進度條的變化，供大家參考，具體內容如下
先上一波效果圖：
點擊減后，每次減百分之十
減到百分之0后，減操作按鈕隱藏
然后點擊重頭開始，恢復到初始狀態(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的時候隱藏
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue實現(xiàn)點擊選中取消切換，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue3下eslint配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了Vue與React的區(qū)別和優(yōu)勢對比，幫助大家更好的選擇適合自己的前端框架，迷茫的同學可以進來參考下2020-12-12
這篇文章主要介紹了element?Drawer?抽屜無法渲染問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
element?ui中的table表格數(shù)據(jù)是動態(tài)生成的,最近遇到個需求,要求我們對單元格進行合并,所以下面這篇文章主要給大家介紹了關于Element?UI中table單元格合并的解決過程,需要的朋友可以參考下2022-08-08
這篇文章主要給大家介紹了關于Vue項目中如何使用Axios封裝http請求的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-10-10
解決vue的 v-for 循環(huán)中圖片加載路徑問題
今天小編就為大家分享一篇解決vue的 v-for 循環(huán)中圖片加載路徑問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了form?表單驗證是異步問題記錄,通過實例代碼介紹了Promise.all 和 Promise.allSettled 區(qū)別，需要的朋友可以參考下2023-01-01
在Vue3中使用vue3-print-nb實現(xiàn)前端打印功能
在前端開發(fā)中,經(jīng)常需要打印頁面的特定部分,比如客戶列表或商品詳情頁,要快速實現(xiàn)這些功能,可以使用 vue3-print-nb 插件,本文就給大家介紹了如何在 Vue 3 中使用 vue3-print-nb 實現(xiàn)靈活的前端打印,需要的朋友可以參考下2024-06-06
vue實現(xiàn)修改標簽中的內容:id class style
這篇文章主要介紹了vue實現(xiàn)修改標簽中的內容：id class style，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07