Vue實現進度條變化效果
阿新 • • 發佈:2021-09-06
本篇文章用簡單實現進度條的變化,供大家參考,具體內容如下
先上一波效果圖:
點選減後,每次減百分之十
減到百分之0後,減操作按鈕隱藏
然後點選重頭開始,恢復到初始狀態
二話不說,上程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁</thttp://www.cppcns.comitle> <link rel="stylesheet" href="style." > <script src="https://cdn.delivr.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,eablhttp://www.cppcns.come www.cppcns.com: 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 diwww.cppcns.comv{ height: 30px; background: red; } .bu{ width: 250px; margin: 20px auto; } .bu button{ margin: 0 20px; }
簡單的實現思路如下:
用v-bind:style將width的值與health繫結,減的時候每次減10,減到0的時候,將減這個按鈕隱藏
隱藏的時候可以使用一個狀態變數,根據v-show來控制,為true的時候顯示,為false的時候隱藏
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。