加减乘除原生写法，及vue写法对比

//样式部分
<div class="container" style="margin-top: 60px;">
        <div class="col-md-8" style="display: flex;align-items: center;justify-content: center;">
            <div class="col-md-3">
                <input type="text" class="form-control num1">
            </div>
            <div class="col-md-2" style="display: flex;align-items: center;justify-content: center;">
                <select style="width: 70px;height:26px;" class="select-wrap">
                    <option value ="+">+</option>
                    <option value ="-">-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                  </select>
            </div>
            <div class="col-md-3">
                <input type="text" class="form-control num2">
            </div>
            <div class="col-md-1" onclick="jisuan()">
                =
            </div>
            <div class="col-md-3">
                <input type="text" class="form-control res">
            </div>
        </div>
    </div>

//第一种绑定事件的方法，直接在div上增加点击事件处理函数，注意加 （）运行
function jisuan(){
            let num1 = parseFloat(document.querySelector(".num1").value);
            let num2 = parseFloat(document.querySelector(".num2").value);
            let methods = document.querySelector(".select-wrap").value;
            // if(methods==="+"){
            //     document.querySelector(".res").value=num1+num2
            // }
            // if(methods==="-"){
            //     document.querySelector(".res").value=num1-num2
            // }
            // if(methods==="*"){
            //     document.querySelector(".res").value=num1*num2
            // }
            // if(methods==="/"){
            //     document.querySelector(".res").value=num1/num2
            // }
            document.querySelector(".res").value=eval(num1+methods+num2)
        }
//感受一下eval的强大

//第二种写法，去掉div上绑定的处理函数，该用监听点击事件
let jisuan = document.querySelector(".jisuan");
        jisuan.addEventListener("click",()=>{
            let num1 = parseFloat(document.querySelector(".num1").value);
            let num2 = parseFloat(document.querySelector(".num2").value);
            let methods = document.querySelector(".select-wrap").value;
            document.querySelector(".res").value=eval(num1+methods+num2)
        })

//vue写法对比
<el-row :gutter="20">
      <el-col :span="4" :offset="4">
        <el-input v-model="num1" type="number"></el-input>
      </el-col>
      <el-col :span="2">
        <el-select v-model="selectValue">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input v-model="num2" type="number"></el-input>
      </el-col>
      <el-col :span="1">
        <span @click="getResNum">=</span>
      </el-col>
      <el-col :span="4">
        <el-input v-model="res" type="number"></el-input>
      </el-col>
    </el-row>

export default {
    data() {
      return {
        selectValue: "",
        num1: "",
        num2: "",
        res: "",
        options: [
          {
            label: "+",
            value: "+"
          },
          {
            label: "-",
            value: "-"
          },
          {
            label: "*",
            value: "*"
          },
          {
            label: "/",
            value: "/"
          }
        ]
      }
    },
    methods: {
      getResNum() {
        this.res = eval(this.num1 + this.selectValue + this.num2);
      }
    },
  }