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

A brief analysis of MySQL backup and recovery

Table of contents 1. Introduction 2. Simple defin...

webpack -v error solution

background I want to check the webpack version, b...

How to mount the CD to find the rpm package under Linux

Written in front Sometimes you need to install so...

Ubuntu installs multiple versions of CUDA and switches at any time

I will not introduce what CUDA is, but will direc...

Code for implementing simple arrow icon using div+CSS in HTML

In web design, we often use arrows as decoration ...

Detailed explanation of node.js installation and HbuilderX configuration

npm installation tutorial: 1. Download the Node.j...

How to set the number of mysql connections (Too many connections)

During the use of mysql, it was found that the nu...

Analysis and solution of the reasons why HTML external reference CSS files are not effective

As a front-end novice, I tinkered with the front-e...

Basic operations on invisible columns in MySQL 8.0

Table of contents 01 Create invisible columns 02 ...

How to run the react project on WeChat official account

Table of contents 1. Use the a tag to preview or ...

vue+tp5 realizes simple login function

This article example shares the specific code of ...

How to configure anti-hotlinking for nginx website service (recommended)

1. Principle of Hotlinking 1.1 Web page preparati...

Summary of MySQL5 green version installation under Windows (recommended)

1 Download MySQL Download address: http://downloa...

How to install the graphical interface in Linux

1. Linux installation (root user operation) 1. In...

Ubuntu 20.04 how to modify the IP address example

illustrate: Today, when continuing the last offic...