Vue-简易计算器的制作

最新推荐文章于 2024-09-05 17:32:12 发布

ZeBaBa

最新推荐文章于 2024-09-05 17:32:12 发布

阅读量403

点赞数

文章标签： Vue

本文链接：https://blog.csdn.net/ZeBaBa/article/details/102805416

版权

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/vue.js"></script>
 </head
 <body>
    <div id="app">
   <input type="text" v-model="n1">
   
   <select v-model = "opt">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
   </select>
   
   <input type="text" v-model="n2">
   
   <input type="button" value="=" @click="calc">
   <input type="text" v-model="result">
  </div>
  
  <script>
   var vm=new Vue({
    el:"#app",
    data:{
     n1:0,
     n2:0,
     result:0,
     opt:'+'
     
    },
    methods:{
     calc(){//计算器的算术方法
      switch(this.opt){
       case '+':
        this.result=parseInt(this.n1) + parseInt(this.n2)
       break;
 
       case '-':
        this.result=parseInt(this.n1) - parseInt(this.n2)
       break;
       case '*':
        this.result=parseInt(this.n1) * parseInt(this.n2)
       break;
      
       case '/':
        this.result=parseInt(this.n1) / parseInt(this.n2)
       break;
      }
      
     }
    }
   });
  </script> 
 </body>
</html>