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

Vuex implements simple shopping cart function

This article example shares the specific code of ...

Native JS encapsulation vue Tab switching effect

This article example shares the specific code of ...

How to install Composer in Linux

1. Download the installation script - composer-se...

Detailed explanation of three ways to cut catalina.out logs in tomcat

1. Log4j for log segmentation 1) Prepare three pa...

jQuery plugin to implement minesweeper game (3)

This article shares the third article on how to u...

Vue Element UI custom description list component

This article example shares the specific code of ...

Take you to understand MySQL character set settings in 5 minutes

Table of contents 1. Content Overview 2. Concepts...

Linux installation MySQL tutorial (binary distribution)

This tutorial shares the detailed steps of instal...

Detailed explanation of the use of Linux seq command

01. Command Overview The seq command is used to g...

The difference between distinct and group by in MySQL

Simply put, distinct is used to remove duplicates...

Vue Router loads different components according to background data

Table of contents Requirements encountered in act...

Detailed explanation of the error problem of case when statement

Preface In the MySQL database, sometimes we use j...

How to use commands in Mysql to achieve hierarchical search help detailed explanation

Preface This article mainly introduces the releva...

Vite introduces the implementation of virtual files

Table of contents background Importing virtual fi...

Graphic tutorial on installing Ubuntu 18.04 on VMware 15 virtual machine

In the past few years, I have been moving back an...