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

Even a novice can understand the difference between typeof and instanceof in js

Vue realizes the progress bar change effect

Even a novice can understand the difference between typeof and instanceof in js

Detailed graphic explanation of how to use svg in vue3+vite project

MySQL Server IO 100% Analysis and Optimization Solution

How to solve the problem of ping being successful but the port being unavailable in Linux

Detailed explanation of where the image pulled by docker is stored

Detailed usage of js array forEach instance

Analysis of the reasons why Vue3 uses Proxy to implement data monitoring

Solution to MySQL 8.0 cannot start 3534

Brief Analysis of MySQL B-Tree Index

The magic of tr command in counting the frequency of English words

Recommend

Detailed explanation of the use of Linux seq command

A complete record of the process of building mobile applications using Vue Native

MySQL uses mysqldump+binlog to completely restore the deleted database principle analysis

MySQL 8.0.17 installation and configuration method graphic tutorial

Vue+node realizes audio recording and playback function

Use MySQL to open/modify port 3306 and open access permissions in Ubuntu/Linux environment

Some parameter descriptions of text input boxes in web design

vue-element-admin global loading waiting

Use of Linux xargs command

Markup language - web application CSS style

Methods to enhance access control security in Linux kernel

How to implement parent-child component communication with Vue

8 powerful techniques for HTML web page creation

A brief discussion on MySQL index optimization analysis

Summary of methods to include file contents in HTML files