Vue implements simple production of counter

Vue implements simple production of counter

This article example shares the simple implementation code of Vue counter for your reference. The specific content is as follows

Process considerations

  • When creating a vue instance: el (mounting point) data (data) methods (methods).
  • The v-on directive is used to bind events, abbreviated as @.
  • The data in data is obtained through the this keyword in the method.
  • The function of the v-text directive is to set the text value of an element, abbreviated as {{}}.
  • The function of the v-html instruction is to set the innerHTML of an element.

Actual code and screenshots

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Counter</title>
</head>
<body>
    <div id="app">
        <!--Counter function area-->
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button @click="add">
                +
            </button>
        </div>
    </div>
        <!-- Development version, including helpful command line warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //vue instance var app = new Vue({
        el:"#app",
       data: {
            num:1
       },
       methods: {
           add:function(){
               //console.log('add')
               if(this.num<10){
                this.num++; 
               }else{
                alert('Don't click, it's the biggest one!');
               }
           },
           sub:function(){
               //console.log('sub')
               if(this.num>0){
                this.num--; 
               }else{
                alert('Don't click, it's the minimum!');
               }
           }
       },
    })
</script>
</body>
</html>

For tutorials on vue.js components, please click on the special vue.js component learning tutorial to learn.

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 implementation counter case
  • 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

<<:  Solution to MySQL garbled code problem under Linux

>>:  The problem of mmx64.efi not found occurs when installing Ubuntu18 dual system on win10

Recommend

JavaScript method to detect the type of file

Table of contents 1. How to view the binary data ...

Analysis of the Principles of MySQL Slow Query Related Parameters

MySQL slow query, whose full name is slow query l...

Detailed explanation of Angular routing sub-routes

Table of contents 1. Sub-route syntax 2. Examples...

Issues installing Python3 and Pip in ubuntu in Docker

text 1) Download the Ubuntu image docker pull ubu...

Let's talk about the difference between MyISAM and InnoDB

The main differences are as follows: 1. MySQL use...

Writing a shell script in Ubuntu to start automatically at boot (recommended)

The purpose of writing scripts is to avoid having...

25 Tools to Improve Website Usability and Conversion Rates

For a website, usability refers to whether users c...

Tips for using the docker inspect command

Description and Introduction Docker inspect is a ...

Encapsulate a simplest ErrorBoundary component to handle react exceptions

Preface Starting from React 16, the concept of Er...

Vue Element front-end application development table list display

1. List query interface effect Before introducing...

Use jQuery to fix the invalid page anchor point problem under iframe

The application scenario is: the iframe page has n...

The difference between where and on in MySQL and when to use them

When I was writing join table queries before, I a...

Solution to forgetting MySQL root password in MACOS

MySQL is a relational database management system ...

How to use the jquery editor plugin tinyMCE

Modify the simplified file size and download the ...

Example analysis to fix problems in historical Linux images

Fix for issues with historical Linux images The E...