使用Vue.js做简易计算器

使用Vue.js做简易计算器

1.引入Vue.js包

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.Html 布局代码

<div id="app">
        <input type="text" v-model="num1" />
        <select v-model="opt">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" v-model="num2" />
        <button @click="result">=</button>
        <input type="text" v-model="res" />
    </div>

3.Vue.js代码

new Vue({
     
        el: "#app",
        data: {
     
            num1: "",
            num2: "",
            opt: "-",
            res: 0
        },
        methods: {
     
            result() {
     
                var optstr = "parseInt(this.num1)" + this.opt + "parseInt(this.num2)";
                this.res = eval(optstr); //eval() 函数可将字符串转换为代码执行，并返回一个或多个值
            }
        }
    });

4.效果图