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

Detailed explanation of 8 ways to pass parameters in Vue routing components

Vue realizes the progress bar change effect

Detailed explanation of 8 ways to pass parameters in Vue routing components

Correct use of MySQL partition tables

Sql query MySql database table name and description table field (column) information

Restart all stopped Docker containers with one command

HTML tag default style arrangement

SQL optimization often makes mistakes, that's because you don't understand the usage of MySQL explain plan

Detailed explanation of Mysql function call optimization

How to skip errors in mysql master-slave replication

How to implement ansible automated installation and configuration of httpd in Linux system

Will CSS3 really replace SCSS?

Recommend

Front-end performance optimization - the pain points that front-end engineers have to talk about

Analysis of Facebook's Information Architecture

MySQL 5.7.23 installation and configuration graphic tutorial

Deeply understand the current status of HTML5 development in mobile development

css Get all elements starting from the nth one

HTML table tag tutorial (36): table header background color attribute BGCOLOR

MySQL 5.6 decompressed version service cannot be started due to system error 1067

Use Visual Studio Code to connect to the MySql database and query

Use of Vue3 table component

Vue+ECharts realizes the drawing of China map and automatic rotation and highlighting of provinces

JavaScript to achieve digital clock effect

CSS3 achieves cool 3D rotation perspective effect

How to install and deploy ftp image server in linux

Detailed comparison of Ember.js and Vue.js

Detailed explanation of the misunderstanding between MySQL and Oracle