Vue realizes the progress bar change effect

This article uses Vue to simply implement the changes of the progress bar for your reference. The specific content is as follows

First, a wave of effect pictures:

Click minus to reduce by 10% each time

After the value is reduced to 0%, the minus button is hidden.

Then click Restart to restore to the initial state

Without further ado, let’s get started with the code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</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">Subtract</button>
    <button v-on:click="reset">Restart</button>
</div>
 
</div>

js:

<script src="app.js"></script>
</body>
</html>
new Vue({
    el:"#vue-app",
    data:{
        health: 100,
        enable : 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;
}

The simple implementation idea is as follows:

Use v-bind:style to bind the value of width to health. When decreasing, decrease by 10 each time. When it decreases to 0, hide the decrease button.

When hiding, you can use a state variable to control it according to v-show. When it is true, it will be displayed, and when it is false, it will be hidden.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue progress bar progressbar component function
Vue component to realize progress bar effect
Progress bar function when vue page is loading (example code)
Vue implements a simple loading progress bar
How to use Nprogress.js progress bar in vue project
Vue develops drag progress bar sliding component
Vue2.0 implements music/video playback progress bar component
vue.js+ElementUI realizes the effect of progress bar prompting password strength
Vue implements file drag upload function with progress bar
Vue render rendering timestamp to time, time to timestamp and rendering progress bar effect

<<: Detailed explanation of MySQL startup options and system variables examples

>>: Teach you how to build a Hadoop 3.x pseudo cluster on Tencent Cloud