Vue的v-model实现简单的计算器

快来打我* 2023-02-21 06:10 15阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
            
        <div class="map3" style="width: 100%;height: 26px; background-color: green; margin-top: 30px;;">
            <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 src="../js/vue-2.4.0 .js"></script>
        <script>
            var fn3 = new Vue({ 
                el: ".map3",
                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 '/':
                        // 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>

![在这里插入图片描述][20200628220355373.png]如图所示

[20200628220355373.png]: https://img-blog.csdnimg.cn/20200628220355373.png