vue简易计算器

小灰灰 2022-04-18 06:33 310阅读 0赞

<!DOCTYPE html>
    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X_UA-Compatible" content="ie=edge">
        <title>vue 入门</title>
        
        <script src="./lib/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <h3>简易计算器</h3>
            <input type="text" v-model="n1">
            <select v-model="opt">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
    
            </select>
            <input type="text" v-model="n2">
            <input type="button" value="=" @click="calc">
            <input type="text" v-model="result">
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    n1: 0,
                    n2: 0,
                    result: 0,
                    opt: '+'
                },
                methods: {
                    calc() {
                        /*
                        switch (this.opt) {
                            case '+':
                                this.result = parseInt(this.n1) + parseInt(this.n2);
                                break;
                            case '-':
                                this.result = parseInt(this.n1) - parseInt(this.n2);
                                break;
                            case '*':
                                this.result = parseInt(this.n1) * parseInt(this.n2);
                                break;
                            case '/':
                                if (this.n2 == 0) {
                                    alert('被除数不能为零!');
                                    return;
                                }
                                this.result = parseInt(this.n1) / parseInt(this.n2);
                                break;
                                
                        }*/
                        var codeStr = "parseInt(this.n1) "+this.opt+" parseInt(this.n2)"
                        this.result = eval(codeStr);
                    }
                }
            })
    
        </script>
    </body>
    
    </html>