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
Table of contents Business Background Using Techn...
Since the project requires a questionnaire, but th...
Table of contents 1. Project environment: 2: DNS ...
The <marquee> tag is a tag that appears in ...
1. Download the installation package -Choose the ...
This article shares the specific code of JavaScri...
This article shares simple HTML and music player ...
6 solutions for network failure in Docker contain...
Recently, I started upgrading my blog. In the proc...
First of all, we need to understand that GB2312, ...
Big pit, don't easily delete the version of P...
1. Add a comment block at the beginning of the sty...
The ps command in Linux is the abbreviation of Pr...
Preface Recently, I took over a client's nati...
Table of contents 1. Container lifecycle manageme...