v-model双向绑定制作简易计算器

通过双向绑定可以做出一个简易的计算器，代码如下：

样式部分：

 <div id="app">

        <input type="text" v-model="num1">
        <select name="" id="" v-model="option">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="num2">
        <input type="button" name="" id="" value="=" @click="calc">
        <input type="text" v-model="sum">
    </div>

vue部分：

<script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                num1:0,// 要计算的第一个值
                num2:0,//要计算的第二关值
                option:"+",// 操作符
                sum:0// 计算的结果
            },
            methods:{
                calc(){// 计算的方法
                // 获取到 计算（操作）符
                // 获取到num1和num2的值
                // 根据不同的操作符，计算这两个值的结果，最后把结果赋值给 sum

                    switch(this.option){
                        case'+':
                        this.sum = parseFloat(this.num1)+parseFloat(this.num2)
                        break;
                        case'-':
                        this.sum = parseFloat(this.num1)-parseFloat(this.num2)
                        break;
                        case'*':
                        this.sum = parseFloat(this.num1)*parseFloat(this.num2)
                        break;
                        case'/':
                        this.sum = parseFloat(this.num1)/parseFloat(this.num2)
                        break;
                    }
                }
            }

下面点击事件可以简写，

calc(){// 计算的方法
                // 获取到 计算（操作）符
                // 获取到num1和num2的值
                // 根据不同的操作符，计算这两个值的结果，最后把结果赋值给 sum

                    // switch(this.option){
                    //     case'+':
                    //     this.sum = parseFloat(this.num1)+parseFloat(this.num2)
                    //     break;
                    //     case'-':
                    //     this.sum = parseFloat(this.num1)-parseFloat(this.num2)
                    //     break;
                    //     case'*':
                    //     this.sum = parseFloat(this.num1)*parseFloat(this.num2)
                    //     break;
                    //     case'/':
                    //     this.sum = parseFloat(this.num1)/parseFloat(this.num2)
                    //     break;
                    // }

                    // 类似于Hack 的写法，简化代码
      eval(`this.sum = parseFloat(this.num1) ${this.option} parseFloat(this.num2)`)
                }