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

Using docker command does not require sudo

Because the docker daemon needs to bind to the ho...

How to write asynchronous tasks in modern JavaScript

Preface In this article, we'll explore the ev...

JavaScript implements front-end countdown effect

This article shares the specific code of JavaScri...

MySQL master-slave synchronization, implementation principle of transaction rollback

BinLog BinLog is a binary log that records all da...

How to display div on object without being blocked by object animation

Today I made a menu button. When you move the mous...

MySQL 5.7.18 installation and configuration method graphic tutorial (CentOS7)

How to install MySQL 5.7.18 on Linux 1. Download ...

Research on Web Page Size

<br />According to statistics, the average s...

Win10 installation of MySQL5.7.18winX64 failed to start the server and no error message

System environment: Win10 64-bit MySQL version: m...

How to create a stored procedure in MySQL and add records in a loop

This article uses an example to describe how to c...

Detailed explanation of redo log and undo log in MySQL

The most important logs in the MySQL log system a...

Implementation of positioning CSS child elements relative to parent elements

Solution Add position:relative to the parent elem...

Mysql specifies the date range extraction method

In the process of database operation, it is inevi...

CSS3 property line-clamp controls the use of text lines

Description: Limit the number of lines of text di...

JavaScript to imitate the registration and login function of Xiaomi official website

Table of contents First we need to build the page...

CSS stacking and z-index example code

Cascading and Cascading Levels HTML elements are ...