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

Step by step guide to build a calendar component with React

Table of contents Business Background Using Techn...

How to submit a pure HTML page, pass parameters, and verify identity

Since the project requires a questionnaire, but th...

Introduction to building a DNS server under centos7

Table of contents 1. Project environment: 2: DNS ...

The marquee tag in HTML achieves seamless scrolling marquee effect

The <marquee> tag is a tag that appears in ...

Detailed tutorial on installing MYSQL under WINDOWS

1. Download the installation package -Choose the ...

JavaScript to achieve product magnifying glass effect

This article shares the specific code of JavaScri...

js to realize web music player

This article shares simple HTML and music player ...

6 solutions for network failure in Docker container

6 solutions for network failure in Docker contain...

Summary of CSS usage tips

Recently, I started upgrading my blog. In the proc...

The difference between GB2312, GBK and UTF-8 in web page encoding

First of all, we need to understand that GB2312, ...

Detailed explanation of the process of deleting the built-in version of Python in Linux

Big pit, don't easily delete the version of P...

Five guidelines to help you write maintainable CSS code

1. Add a comment block at the beginning of the sty...

Summary of Linux ps and pstree command knowledge points

The ps command in Linux is the abbreviation of Pr...

A brief discussion on the solution to the problem of native page compatibility with IE9

Preface Recently, I took over a client's nati...

Summary and analysis of commonly used Docker commands and examples

Table of contents 1. Container lifecycle manageme...