使用vue制作简易计算器

最新推荐文章于 2024-08-26 19:09:35 发布

瑾寰

最新推荐文章于 2024-08-26 19:09:35 发布

阅读量267

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_68383591/article/details/129725760

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
       <input type="number" v-model="a1">
       <select v-model="fuhao">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
        <option value="%">%</option>
       </select>
       <input type="number" v-model="a2">
       <input type="button" value="="@click="compute">
        <input type="text" v-model="res">
    </div>
</body>
<script>
    new Vue({
        el:"#box",
        data:{
            a1:"",
            fuhao:"+",
            a2:"",
            res:""
        },
        methods:{
            compute(){
                if(this.a1 == '' || this.a2==''){
                    alert("请输入完整数据")
                }
                var n1 = Number(this.a1)
                var n2 = Number(this.a2)
                switch(this.fuhao){
                    case "+":
                        this.res = n1 + n2
                        break
                    case "-":
                        this.res = n1 - n2
                        break
                    case "*":
                        this.res = n1 * n2
                        break
                    case "/":
                        if(this.a2 == 0){
                            alert("被除数不能为0！")
                        }
                        this.res = n1 / n2
                        break
                    case "%":
                        this.res = n1 % n2
                        break
                }
            }
        }

        
    })
</script>
</html>