vue双向绑定实现简易计算器

<!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 id="app">
    <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 = "clac">
    <input type="text" v-model = "result">
  </div>
  <script src="../js/vue.js"></script>
  <script>
    let vm = new Vue({
      el:"#app",
      data:{
        n1:0,
        opt:"+",
        n2:0,
        result:0
      },
      methods:{
        clac(){
          // 计算方法
          // 获取到操作符
          // 获取到n1n2的值
          // 根据不同的操作符，计算这两个值的结果，最后把结果赋值给result
          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>
</body>
</html>
 
可以把clac函数中内容替换为一句代码
eval(`this.result = parseFloat(this.n1)${this.opt}parseFloat(this.n2)`)
 
不理解是真的
posted @ 2020-04-01 09:00  _魔鬼在人间  阅读(319)  评论(0)    收藏  举报