Vue實現進度條變化效果
本篇文章用Vue簡單實現進度條的變化,供大傢參考,具體內容如下
先上一波效果圖:
點擊減後,每次減百分之十
減到百分之0後,減操作按鈕隱藏
然後點擊重頭開始,恢復到初始狀態
二話不說,上代碼
<!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; }
簡單的實現思路如下:
用v-bind:style將width的值與health綁定,減的時候每次減10,減到0的時候,將減這個按鈕隱藏
隱藏的時候可以使用一個狀態變量,根據v-show來控制,為true的時候顯示,為false的時候隱藏
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。