通过VUE制作简易计算器

最新推荐文章于 2024-04-19 16:48:39 发布

朵朵宝

最新推荐文章于 2024-04-19 16:48:39 发布

阅读量799

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/magic_818/article/details/127706524

版权

<!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里面的引号要用单引号