简单的计算器案例vue

最新推荐文章于 2023-03-14 18:28:18 发布

cheer_98

最新推荐文章于 2023-03-14 18:28:18 发布

阅读量161

点赞数

分类专栏：学习日常

本文链接：https://blog.csdn.net/cheer_98_/article/details/103084869

版权

学习日常专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <script src="vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num1">
    <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="num2">
    <input type="button" value="=" @click="cal">
    <input type="text" v-model="result">
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            num1:0,
            num2:0,
            result:0,
            opt:"+"
        },
        methods:{
            cal(){
                switch (this.opt) {
                    case "+":
                        this.result = parseInt(this.num1) + parseInt(this.num2)
                        break;
                    case "-":
                        this.result = parseInt(this.num1) - parseInt(this.num2)
                        break;
                    case "*":
                        this.result = parseInt(this.num1) * parseInt(this.num2)
                        break;
                    case "/":
                        this.result = parseInt(this.num1) / parseInt(this.num2)
                        break;
                }
                //第二种方法
                // var str = 'parseInt(this.num1)' + this.opt + 'parseInt(this.num2)' ;
                // this.result = eval(str);
            }
        }
    })
</script>
</body>
</html>

cheer_98

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的计算器案例vue

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简易计算器</title> <script src="vue-2.4.0.js"></script></head><b...
复制链接

扫一扫