This article example shares the specific code of Vue to realize the counter display for your reference. The specific content is as follows Effect: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Counter</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> #app{ text-align: center; margin: 0 auto; line-height: 500px; } #app input{ width: 50px; height: 40px; font-size: 20px; border-radius: 5px; outline: none; /* Custom border */ border: 1px solid transparent; background-color: blue; line-height: 30px; color: white; } #app span{ padding: 20px 20px; border: 1px; } </style> </head> <body> <div id="app"> <input type="button" value="-" @click="sub"/> <span>{{num}}</span> <input type="button" value="+" @click="add"/> </div> <script> var app = new Vue({ el: "#app", data: { num: 1 }, methods:{ add: function(){ if(this.num<10){ this.num++; }else{ alert("reached the maximum!"); } }, sub: function(){ if(this.num>0){ this.num--; }else{ alert("It's gone!"); } } } }) </script> </body> </html>
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:
|
<<: Summary of synchronization and mutual exclusion knowledge points between Linux threads
>>: Detailed explanation of how a SQL statement is executed in MySQL
mysql master-slave configuration 1. Preparation H...
This article shares the specific code of jQuery t...
There are probably as many modular solutions for ...
Text Shadow text-shadow: horizontal offset vertic...
Table of contents 1. Basics 1.ref 2. toRef 3. toR...
Preface: I heard a long time ago that MySQL 8.0 s...
I recently encountered a problem at work. The doc...
Preface Vue (pronounced /vjuː/, similar to view) ...
Table of contents Variable Scope The concept of c...
Today, the error "No input file specified&qu...
How to center an element in the browser window He...
closure service nginx stop systemctl stop nginx s...
Wildcard categories: %Percent wildcard: indicates...
Solve the problem of eight hours time difference ...
A jQuery plugin every day - stacked menu, for you...