Vue implementation counter case

Vue implementation counter case

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>
  • Write the data you need in data : num
  • -Add two methods in methods : add and subtract
  • Use v-text or a difference expression to set num to the span tag
  • Use v-on : (abbreviation, @ ) to bind add and sub to the + and - buttons respectively.
  • Accumulation logic: if less than 10, accumulate, otherwise prompt
  • Decrement logic: greater than 0, gradually, otherwise prompt
  • The method uses the this keyword to obtain the data in data

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 implements simple production of counter
  • Create a PC-side Vue UI component library from scratch (counter component)
  • Vuex usage and simple example (counter)
  • Vuex implements counter and list display effects
  • Vuex implements a simple counter
  • Implementation of Vue counter

<<:  Summary of synchronization and mutual exclusion knowledge points between Linux threads

>>:  Detailed explanation of how a SQL statement is executed in MySQL

Recommend

How to implement simple data monitoring with JS

Table of contents Overview first step Step 2 Why ...

Vue3 encapsulates the side navigation text skeleton effect component

Vue3 project encapsulation side navigation text s...

CSS style reset and clear (to make different browsers display the same effect)

In order to make the page display consistent betwe...

Detailed explanation of 6 ways of js inheritance

Prototype chain inheritance Prototype inheritance...

MySQL incremental backup and breakpoint recovery script example

Introduction Incremental backup means that after ...

Detailed explanation of the TARGET attribute of the HTML hyperlink tag A

The hyperlink <a> tag represents a link poin...

Database backup in docker environment (postgresql, mysql) example code

Table of contents posgresql backup/restore mysql ...

MySQL5.7+ MySQL Workbench installation and configuration method graphic tutorial under MAC

This article mainly focuses on the installation a...

Linux Disk Quota Management Graphical Example

Disk quota is the storage limit of a specified di...

WeChat applet uses the video player video component

This article example shares the specific code of ...

Detailed explanation of mysql basic operation statement commands

1. Connect to MySQL Format: mysql -h host address...

You may not know these things about Mysql auto-increment id

Introduction: When using MySQL to create a table,...

The difference between delete, truncate, and drop and how to choose

Preface Last week, a colleague asked me: "Br...

JS cross-domain XML--with AS URLLoader

Recently, I received a requirement for function ex...

How to create a table in mysql and add field comments

Directly post code and examples #Write comments w...