当前位置： 移动技术网 > IT编程>网页制作>Html5 > vue实现简易计算器

vue实现简易计算器

2019年09月27日  | 移动技术网IT编程  | 我要评论 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>简易计算器</title>
    <script src="./lib/vue.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;
                }
            }
        }
    })
</script>
</body>
</html>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网