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

Record the whole process of MySQL master-slave configuration based on Linux

mysql master-slave configuration 1. Preparation H...

jQuery implements Table paging effect

This article shares the specific code of jQuery t...

CSS modular solution

There are probably as many modular solutions for ...

New settings for text and fonts in CSS3

Text Shadow text-shadow: horizontal offset vertic...

How to understand the difference between ref toRef and toRefs in Vue3

Table of contents 1. Basics 1.ref 2. toRef 3. toR...

How to quickly add columns in MySQL 8.0

Preface: I heard a long time ago that MySQL 8.0 s...

Solution to the Docker container being unable to access the host port

I recently encountered a problem at work. The doc...

How to call the browser sharing function in Vue

Preface Vue (pronounced /vjuː/, similar to view) ...

Learn about JavaScript closure functions in one article

Table of contents Variable Scope The concept of c...

Solution to "No input file specified" in nginx+php

Today, the error "No input file specified&qu...

How to use positioning to center elements (web page layout tips)

How to center an element in the browser window He...

How to shut down/restart/start nginx

closure service nginx stop systemctl stop nginx s...

Mysql | Detailed explanation of fuzzy query using wildcards (like,%,_)

Wildcard categories: %Percent wildcard: indicates...

Solution to the problem of eight hours difference in MySQL insertion time

Solve the problem of eight hours time difference ...

jQuery plugin to implement stacked menu

A jQuery plugin every day - stacked menu, for you...