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:
|
<<: Detailed explanation of MySQL startup options and system variables examples
>>: Teach you how to build a Hadoop 3.x pseudo cluster on Tencent Cloud
Recommend
Summary of 4 ways to add users to groups in Linux
Preface Linux groups are organizational units use...
Solution to the paging error problem of MySQL one-to-many association query
The query data in the xml price inquiry contains ...
Docker deployment MySQL8 cluster (one master and two slaves) implementation steps
Table of contents 1. Install Docker on CentOS 7.9...
Complete steps to configure IP address in Ubuntu 18.04 LTS
Preface The method of configuring IP addresses in...
How to isolate users in docker containers
In the previous article "Understanding UID a...
Linux gzip command compression file implementation principle and code examples
gzip is a command often used in Linux systems to ...
Detailed tutorial for installing the unzipped version of mysql5.7.28 winx64 on windows
Table of contents 1. Unzip 2. Create a data folde...
Install mysql offline using rpm under centos 6.4
Use the rpm installation package to install mysql...
WeChat applet picker multi-column selector (mode = multiSelector)
Table of contents 1. Effect diagram (multiple col...
Multiple ways to calculate age by birthday in MySQL
I didn't use MySQL very often before, and I w...
How to enable TLS and CA authentication in Docker
Table of contents 1. Generate a certificate 2. En...
Detailed explanation of the MySQL MVCC mechanism principle
Table of contents What is MVCC Mysql lock and tra...
Reasons and solutions for multiple executions of the watch method when Vue monitors route changes
Table of contents Requirement description: Requir...
Detailed explanation of views in MySQL
view: Views in MySQL have many similarities with ...
Detailed explanation of the correct way to configure SSL (https certificate) in Apache on Ubuntu
First, take a look at Alibaba Cloud's officia...