Vue implements a simple calculator

Vue implements a simple calculator

This article example shares the specific code of Vue to implement a simple calculator for your reference. The specific content is as follows

Case Requirements

Case ideas

1. Binding of values ​​A and B is realized through v-model directive
2. Bind events to the calculation buttons to implement calculation logic
3. Bind the calculation results to the corresponding positions

Implementing static pages

<div id='app'>
    <h1>Simple Calculator</h1>
    <div><span>Value A:</span><span><input type="text" v-model='a'></span></div>
    <div><span>Value B:</span><span type="text" v-model='b'></span></div>
    <div><button>Calculate</button></div>
    <div><span>Calculation results</span><span></span></div>
</div>

Importing Vue

<script type="text/javascript" src="js/vue.js"></script>

Add instructions for static pages

<div id='app'>
    <h1>Simple Calculator</h1>
    <div><span>Value A:</span>
      <span>
        <input type="text" v-model='a'>
      </span>
    </div>
    <div>
      <span>Value B:</span>
      <span>
        <input type="text" v-model='b'>
      </span>
    </div>
    <div>
      <button v-on:click="handle">Calculate</button>
    </div>
    <div><span>Calculation result</span><span v-text="result"></span></div>
</div>

Set calculation function

<script type="text/javascript">
    /* */
    var vm = new Vue({
      el: "#app",
      data: {
        a: '',
        b: '',
        result: ''
      },
      methods: {
        handle: function () {
          // Implement calculation logic this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });
</script>

Final code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Calculator</title>
</head>

<body>
  <div id='app'>
    <h1>Simple Calculator</h1>
    <div><span>Value A:</span>
      <span>
        <input type="text" v-model='a'>
      </span>
    </div>
    <div>
      <span>Value B:</span>
      <span>
        <input type="text" v-model='b'>
      </span>
    </div>
    <div>
      <button v-on:click="handle">Calculate</button>
    </div>
    <div><span>Calculation result</span><span v-text="result"></span></div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /* */
    var vm = new Vue({
      el: "#app",
      data: {
        a: '',
        b: '',
        result: ''
      },
      methods: {
        handle: function () {
          // Implement calculation logic this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });
  </script>
</body>

</html>

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:
  • Complete example of calculator function implemented by Vue.js
  • Implementing a simple calculator using Vue
  • Example of classic calculator/scientific calculator function implemented by vue.js
  • Vue implements a simple addition calculator
  • Vue.js implements price calculator function
  • Vue implements calculator function
  • Vue implements a simple calculator
  • Vue implements mobile calculator
  • Vue.js implements simple calculator function
  • Vue implements a simple web calculator

<<:  SQL GROUP BY detailed explanation and simple example

>>:  Detailed explanation of Linux file operation knowledge points

Recommend

VSCode configuration Git method steps

Git is integrated in vscode, and many operations ...

mysql5.7.19 winx64 decompressed version installation and configuration tutorial

Recorded the installation tutorial of mysql 5.7.1...

CocosCreator general framework design resource management

Table of contents Problems with resource manageme...

Detailed tutorial on Tomcat installation and deployment in Windows 10

Table of contents 1 Java environment configuratio...

Object.entries usage you don't know in JavaScript

Table of contents Preface 1. Use for...of to iter...

MYSQL updatexml() function error injection analysis

First, understand the updatexml() function UPDATE...

Optimization analysis of Limit query in MySQL optimization techniques

Preface In actual business, paging is a common bu...

How to deal with time zone issues in Docker

background When I was using Docker these two days...

mysql batch delete large amounts of data

mysql batch delete large amounts of data Assume t...

A brief discussion on common operations of MySQL in cmd and python

Environment configuration 1: Install MySQL and ad...

Example code for implementing equal width layout in multiple ways using CSS

The equal-width layout described in this article ...

Three useful codes to make visitors remember your website

Three useful codes to help visitors remember your...

Detailed explanation of when javascript scripts will be executed

JavaScript scripts can be embedded anywhere in HT...