使用三种方法来实现简单的计算器

最新推荐文章于 2023-10-24 15:39:34 发布

阅读量169

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2203_75865923/article/details/129926867

版权

1.导入并连接vue.js

<script src="./js/vue.js"></script>

创建一个div标签，给一个id为app，然后再写两个input标签，选择类型为text输入框，以方便输入数字使用select标签和option标签来实现加减乘除符号的选择

 <div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
    <cpn3></cpn3>
    <cpn4></cpn4>
  </div>
  <template id="cpn1">
    <div class="input1">
      <input type="text" v-model.number="number1">
      <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="text" v-model.number="number2">
      <button @click="btn">计算</button><br />
      {{number1 }} {{opt}} {{number2}}=
      <span ref="sp"></span>
 
    </div>

3.使用watch侦听器的方法来实现

  watch: {
        number1: function (newValue) {
          this.value = newValue + this.number2
        },
        number2: function (newValue) {
          this.value = newValue + this.number1
        },
        opt: function (newValue) {
          if (newValue === "+") this.value = this.number1 + this.number2
          if (newValue === "-") this.value = this.number1 - this.number2
          if (newValue === "*") this.value = this.number1 * this.number2
          if (newValue === "/") this.value = this.number1 / this.number2
        }
      },
    })

4.使用methods方法来实现

 methods: {
        btn() {
          let opt = this.opt
          if (this.opt === "+") this.$refs.sp.innerText = this.number1 + this.number2
          if (this.opt === "-") this.$refs.sp.textContent = this.number1 - this.number2
          if (this.opt === "*") this.$refs.sp.textContent = this.number1 * this.number2
          if (this.opt === "/") this.$refs.sp.textContent = this.number1 / this.number2
        }
      },
    })

5.运行结果