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

Tips for writing concise React components

Table of contents Avoid using the spread operator...

Vue implements the function of calling the mobile phone camera and album

This article shares the specific code of Vue to a...

Implementation of MySQL scheduled database backup (full database backup)

Table of contents 1. MySQL data backup 1.1, mysql...

Solution to failure in connecting to mysql in docker

Scenario: After installing the latest version of ...

Linux CentOS MySQL database installation and configuration tutorial

Notes on installing MySQL database, share with ev...

jQuery plugin to implement accordion secondary menu

This article uses a jQuery plug-in to create an a...

How to use MySQL stress testing tools

1. MySQL's own stress testing tool - Mysqlsla...

How to build a MySQL high-availability and high-performance cluster

Table of contents What is MySQL NDB Cluster Preli...

MySQL 8.0.21 installation tutorial under Windows system (illustration and text)

Installation suggestion : Try not to use .exe for...

HTML+CSS div solution when relative width and absolute width conflict

Div solution when relative width and absolute wid...

How to create a simple column chart using Flex layout in css

The following is a bar chart using Flex layout: H...

nuxt.js multiple environment variable configuration

Table of contents 1. Introduction 2. Scenario 3. ...

Reasons and methods for Waiting for table metadata lock in MySQL

When MySQL performs DDL operations such as alter ...

Problems and pitfalls of installing Mysql5.7.23 in Win10 environment

I read many tutorials, but found that I could nev...

Mysql desktop tool SQLyog resources and activation methods say goodbye to the black and white command line

Without further ado, let’s get started with resou...