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

JavaScript css3 to implement simple video barrage function

This article attempts to write a demo to simulate...

Application nesting of HTML ul unordered tables

Application nesting of unordered lists Copy code T...

JavaScript implements page scrolling animation

Table of contents Create a layout Add CSS styles ...

How to start tomcat using jsvc (run as a normal user)

Introduction to jsvc In production, Tomcat should...

MySQL detailed single table add, delete, modify and query CRUD statements

MySQL add, delete, modify and query statements 1....

Detailed explanation of common Docker commands

1. Help Command 1. View the current Docker versio...

Summary of basic knowledge points of MySql database

Table of contents Basic database operations 2) Vi...

Div adaptive height automatically fills the remaining height

Scenario 1: Html: <div class="outer"...

Learn the basics of nginx

Table of contents 1. What is nginx? 2. What can n...

React implements a general skeleton screen component example

Table of contents What is a skeleton screen? Demo...

Why I recommend Nginx as a backend server proxy (reason analysis)

1. Introduction Our real servers should not be di...

How to output Chinese characters in Linux kernel

You can easily input Chinese and get Chinese outp...

What does the "a" in rgba mean? CSS RGBA Color Guide

RGBA is a CSS color that can set color value and ...

Detailed tutorial on uploading and configuring jdk and tomcat on linux

Preparation 1. Start the virtual machine 2. git t...

Detailed explanation of JS homology strategy and CSRF

Table of contents Overview Same Origin Policy (SO...