Implementation of Vue counter

Implementation of Vue counter

1. Implementation of counter

Simply implement a counter on the page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
  <h3>Current counter: {{counter}}</h3>
  <button @click="add">+</button>
  <button @click="minutes">-</button>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      counter: 0
    },
    methods: {
      add: function () {
        this.counter++;
      },
      minutes: function () {
        this.counter--;
      }
    }
  })
</script>
</body>
</html>

2. Achieve results

The final effect is shown in the gif below:

This is the end of this article about the implementation of Vue counter. For more relevant Vue counter content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue implementation counter case
  • 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

<<:  CSS flex several multi-column layout

>>:  How to configure redis sentinel mode in Docker (on multiple servers)

Recommend

Detailed explanation of the deployment process of SEATA transaction service Docker

1. Create a database authorization statement >...

Introduction to several ways to introduce CSS in HTML

Table of contents 1. Embed CSS styles directly in...

Discussion on the Issues of Image Button Submission and Form Repeated Submission

In many cases, in order to beautify the form, the ...

Detailed explanation of HTML's <input> tag and how to disable it

Definition and Usage The <input> tag is use...

The implementation of Youda's new petite-vue

Table of contents Preface Introduction Live Easy ...

How to delete garbled or special character files in Linux

Due to encoding reasons, garbled characters will ...

Detailed explanation of dragging table columns using Vue Element Sortablejs

1. css: dragTable.css @charset "UTF-8";...

Analysis of mysql view functions and usage examples

This article uses examples to illustrate the func...

mysql-8.0.15-winx64 uses the zip package to install and the service is shut down immediately after starting

The MySQL version used in this example is mysql-8...

Example usage of Linux compression file command zip

The ".zip" format is used to compress f...

Swiper+echarts realizes the left and right scrolling effect of multiple dashboards

This article shares the specific code of swiper+e...

Summary of problems that may occur when using JDBC to connect to Mysql database

First, clarify a few concepts: JDBC: Java databas...

MySQL 8.0.16 installation and configuration method graphic tutorial under Windows

This article records the installation graphic tut...

Node.js makes a simple crawler case tutorial

Preparation First, you need to download nodejs, w...

Encapsulate a simplest ErrorBoundary component to handle react exceptions

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