通过VUE制作简易计算器

绝地灬酷狼 2023-10-11 19:39 64阅读 0赞

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <script src="vue.min-v2.5.16.js"></script>
>         <title>Document</title>
>     </head>
>     <body>
>        
>         <div id="app">
>             <form action=""></form>
>             <input type="text" v-model="a">
>             <select v-model="jjcc">
>                 <option value="0" >+</option>
>                 <option value="1">-</option>
>                 <option value="2">*</option>
>                 <option value="3">/</option>
>             </select>
>             <input type="text" v-model="b">
>             <button v-mdoel="jjcc"@click="fun()">=</button>
>             <input type="text" v-model="result">
>             <button type="reset">重置</button>
>         </form>
>         </div>
>        <script>
>             new Vue({
>                 el:'#app',
>                 data:{
>                     a:null,
>                     b:null,
>                     jjcc:null,
>                     result:null,
>                 },
>                 methods:{
>                     fun(){
>                         switch(this.jjcc){
>                             case '0':
>                                 this.result=parseInt(this.a)+parseInt(this.b);
>                             break;
>                             case '1':this.result=parseInt(this.a)-parseInt(this.b);
>                             break;
>                             case '2':this.result=parseInt(this.a)*parseInt(this.b);
>                             break;
>                             case '3':this.result=parseInt(this.a)/parseInt(this.b);
>                             break;
>                             default:
>                                 alert('请输入正确的数字');
>                                 break;
>                         }
>                     }
>                 }
>             });
>        </script>   
>     </body>
>     </html>
> 
> 需要注意html不会报错,所以编译代码时要注意代码正确性,switch的用法,和script里面的引号要用单引号