计算器的简单实现

最新推荐文章于 2024-09-27 15:27:45 发布

coder little white

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量37

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_69255183/article/details/129916922

版权

使用Vue.js完成简单的计算器

1.使用事件点击来完成计算(每次都需要点击计算按钮)

<!-- <div id="app">
    <input type="text" placeholder="请输入第一个数" v-model.number="number1">
    <select v-model="opt">
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
      <input type="text" placeholder="请输入第二个数" v-model.number="number2">
      <button @click="btn">计算</button>
      <br>
      {{number1}} {{opt}} {{number2}} = {{results}}
    </select>
  </div> -->
  
   // const vm = new Vue({
    //   el: "#app",
    //   data: {
    //     number1: 0,
    //     number2: 0,
    //     opt: "*",
    //     results: " "
    //   },
    //   methods: {
    //     btn() {
    //       switch (this.opt) {
    //         case "*":
    //           this.results = this.number1 * this.number2
    //           break;
    //         case "-":
    //           this.results = this.number1 - this.number2
    //           break;
    //         case "+":
    //           this.results = this.number1 + this.number2
    //           break;
    //         case "-":
    //           this.results = this.number1 - this.number2
    //           break;
    //         default:
    //           break;
    //       }
    //     }
    //   }
    // })

2.使用声明周期回调监听属性的变化


  <!-- <div id="app">
    <input type="text" placeholder="请输入第一个数" v-model.number="number1">
    <select v-model="opt">
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
      <input type="text" placeholder="请输入第二个数" v-model.number="number2">
      <button>计算</button>
      <br>
      {{number1}} {{opt}} {{number2}} = {{results}}
    </select>
  </div> -->
  
  
  // const vm = new Vue({
    //   el: "#app",
    //   data: {
    //     number1: 0,
    //     number2: 0,
    //     opt: "*",
    //     results: " "
    //   },
    //   mounted() {
    //     this.$watch('number1', (newValue) => {
    //       this.results = newValue + this.number2
    //     })
    //     this.$watch('number2', (newValue) => {
    //       this.results = newValue + this.number1
    //     })
    //     this.$watch('opt', (newValue) => {
    //       if (newValue === "+") this.results = this.number1 + this.number2
    //       if (newValue === "-") this.results = this.number1 - this.number2
    //       if (newValue === "*") this.results = this.number1 * this.number2
    //       if (newValue === "/") this.results = this.number1 / this.number2
    //     })
    //   }
    // })

3.使用计算属性监听属性的变化

div id="app">
    <input type="text" placeholder="请输入第一个数" v-model.number="number1">
    <select v-model="opt">
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
      <input type="text" placeholder="请输入第二个数" v-model.number="number2">
      <button>计算</button>
      <br>
      {{number1}} {{opt}} {{number2}} = {{results}}
    </select>
  </div>
  
  const vm = new Vue({
      el: "#app",
      data: {
        number1: 0,
        number2: 0,
        opt: "*",
        results: " "
      },
      computed: {
        getResult() {
          let value
          if (this.opt === "+") value = this.number1 + this.number2
          if (this.opt === "-") value = this.number1 - this.number2
          if (this.opt === "*") value = this.number1 * this.number2
          if (this.opt === "/") value = this.number1 / this.number2
          return value
        }
      }
    })

4.使用js原生实现相同效果

 <div id="app">
    <input class="a" type="text" placeholder="请输入第一个数">
    <select>
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
      <input class="aa" type="text" placeholder="请输入第二个数">
      <button>计算</button><br>
      您得到的结果为
    </select>
  </div>
  <script>
    const inputEl01 = document.querySelector(".a")
    const inputEl02 = document.querySelector(".aa")
    const buttonEl = document.querySelector("button")
    const selectEl = document.querySelector("select")
    const divEl = document.querySelector("#app")
    const text = document.createElement("span")
    divEl.append(text)
    buttonEl.onclick = jisuan
    inputEl01.onkeyup = jisuan
    inputEl02.onkeyup = jisuan
    selectEl.onchange = jisuan
    function jisuan() {
      if (selectEl.value === "+") {
        // console.log(Number(inputEl01.value) +  Number(inputEl02.value))
        text.innerHTML= ""
        text.innerHTML = Number(inputEl01.value) +  Number(inputEl02.value)
        // divEl.append(Number(inputEl01.value) +  Number(inputEl02.value))
      }
      if (selectEl.value === "-") {
        // console.log(Number(inputEl01.value) - Number(inputEl02.value))
        text.innerHTML= ""
        text.innerHTML = Number(inputEl01.value) -  Number(inputEl02.value)
        // divEl.append(Number(inputEl01.value) +  Number(inputEl02.value))
      }
      if (selectEl.value === "*") {
        // console.log(Number(inputEl01.value) * Number(inputEl02.value))
        text.innerHTML= ""
        text.innerHTML = Number(inputEl01.value) *  Number(inputEl02.value)
        // divEl.append(Number(inputEl01.value) *  Number(inputEl02.value))
      }
      if (selectEl.value === "/") {
        // console.log(Number(inputEl01.value) / Number(inputEl02.value))
        text.innerHTML= ""
        text.innerHTML = Number(inputEl01.value) /  Number(inputEl02.value)
        // divEl.append(Number(inputEl01.value) +  Number(inputEl02.value))
      }
    }
  </script>