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

Solution to the failure of loading dynamic library when Linux program is running

Unable to load dynamic library under Linux When t...

JavaScript design pattern learning adapter pattern

Table of contents Overview Code Implementation Su...

MySQL 5.7.17 installation and configuration method graphic tutorial (windows)

1. Download the software 1. Go to the MySQL offic...

Detailed explanation of the problem of configuring servlet url-pattern in tomcat

When configuring web.xml for tomcat, servlet is a...

6 solutions for network failure in Docker container

6 solutions for network failure in Docker contain...

Detailed explanation of using JavaScript WeakMap

A WeakMap object is a collection of key/value pai...

Detailed explanation of vue page state persistence

Table of contents Code: Replenish: Summarize Requ...

Detailed explanation of psql database backup and recovery in docker

1. Postgres database backup in Docker Order: dock...

Detailed comparison of Ember.js and Vue.js

Table of contents Overview Why choose a framework...

Linux uses NetworkManager to randomly generate your MAC address

Nowadays, whether you are on the sofa at home or ...

Solve the error problem caused by modifying mysql data_dir

Today, I set up a newly purchased Alibaba Cloud E...

Common methods of Vue componentization: component value transfer and communication

Related knowledge points Passing values ​​from pa...

JS implements the snake game

Table of contents 1. Initialization structure 2. ...

Solve the problem of specifying udp port number in docker

When Docker starts a container, it specifies the ...