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