vue实现简单计算器

最新推荐文章于 2024-02-29 09:16:48 发布

希小晨

最新推荐文章于 2024-02-29 09:16:48 发布

阅读量27

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_50616415/article/details/131857004

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           input{
               width:50px;
           }
       </style>
       <script src="js/vue.min.js" type="text/javascript"></script>
   </head>
   <body>
       <div id="app" >
       <input type="text"v-model="num1" />
       <select v-model:value="fu">
           <option value="+">+</option>
           <option value="-">-</option>
           <option value="*">*</option>
           <option value="/">/</option>
       </select>
       <input type="text" v-model="num2" />
       =
       <input type="text" v-model="num3" />
       <input type="button" v-on:click="btn" value="计算" />
       </div>
   </body>
   <script>
       var js=new Vue(
       {
           el:'#app',
           data:{
               num1:'0',
               num2:'0',
               num3:'0',
               fu:'+'
           },
           methods:{
               btn(){
                   if(this.fu=='+'){
                       this.num3=parseInt(this.num1)+parseInt(this.num2)
                   };
                   if(this.fu=='-'){
                       this.num3=parseInt(this.num1)-parseInt(this.num2)
                   };
                   if(this.fu=='*'){
                       this.num3=parseInt(this.num1)*parseInt(this.num2)
                   };
                   if(this.fu=='/'){
                       this.num3=parseInt(this.num1)/parseInt(this.num2)
                   };

               }
           }
       }
       )

   </script>
</html>