vue實現簡易計算器

本文轉載自查看原文 2019-09-27 16:47 1448

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue實現簡易計算器 Vue 組件編寫：簡易計算器 android簡易計算器的實現 Android Studio——簡易計算器實現 jquery實現簡易的計算器簡易計算器的java實現原生JS實現簡易計算器用jQ實現一個簡易計算器 Java簡易計算器實現 java基礎——簡易計算器的實現