Vue implements simple calculator function

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

Function: Add, subtract, multiply and divide the values in the two input boxes

Knowledge points used:

1. v-model data two-way binding

2. .number is converted to a number

3.@click click event

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
    //Choose your own vue location <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="box">
   <!-- Convert the first value to a number -->
   <input type="number" v-model.number="num1"/>
   
   <select v-model="str">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
   </select>
   <input type="number" v-model.number="num2"/>
   <!-- Click the equal sign to execute the contents of the cal function-->
   <button type="button" @click="calc">=</button>
   <!-- Output the result -->
   <input type="text"/ v-model="num3">
  </div>
 </body>
 <script type="text/javascript">
  var vm = new Vue({
   el:"#box",
   data:{
    // The initial value in the input box num1: 0,
     num2:0,
     num3:0,
     str:'+'
    
   },
   methods:{
    calc(){
     if(this.str=="+"){
      this.num3=this.num1+this.num2
     }else if(this.str=="-"){
      this.num3=this.num1-this.num2
     }else if(this.str=="*"){
      this.num3=this.num1*this.num2
     }else if(this.str=="/"){
      this.num3=this.num1/this.num2
     }
    }
   
   }
   
  })
 </script>
</html>

result:

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.js implements price calculator function
Vue implements a simple addition calculator
Vue implements calculator function
Vue implements a simple calculator
Vue.js implements simple calculator function
Vue implements mobile calculator
Vue.js implements a three-dimensional calculator

<<: Implementation idea of left alignment of the last row of flex box layout

>>: hr horizontal line style example code