2.1vue简易计算器

第一种 推荐

  <div id="app">
    <input type="text" name="" id="" v-model="n1">
    <select name="" id="" v-model="opt" >
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" name="" id="" v-model="n2">
    <input type="button" value="=" @click="calc">
    <input type="text" name="" id="" 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=parseFloat(this.n1)+parseFloat(this.n2)
                    break;
                    case '-':
                    this.result=parseFloat(this.n1)-parseFloat(this.n2)
                    break;
                    case '*':
                    this.result=parseFloat(this.n1)*parseFloat(this.n2)
                    break;
                    case '/':
                    this.result=parseFloat(this.n1)/parseFloat(this.n2)
                    break;
                }
            }
        }
    })
</script>

投机取只需要拼接一下 eval()

• +-*/按需拼接

• 替代switch case

  var codeStr='paparseFloat(this.n1)'+this.opt+'parseFloat(this.n2)' this.result = eval(codeStr)