计算器案例

白天睡晚上卷

已于 2023-04-01 21:37:33 修改

阅读量112

点赞数

文章标签： vue.js javascript

于 2023-03-31 22:43:42 首次发布

本文链接：https://blog.csdn.net/m0_66378680/article/details/129889863

版权

该文章演示了在Vue2中如何创建组件，使用watch和computed属性来监听和响应数据的变化。通过一个简单的计算器示例，展示了如何根据用户选择的运算符动态计算两个数字的结果，并更新显示。文章涵盖了v-model绑定、事件处理以及使用$refs访问DOM元素。

摘要由CSDN通过智能技术生成

本篇文章讲述了如何使用vue2中的watch，computed监听数据的变化。

思路：1.创建vue实例

2.注册组件

3.使用组件，编写相应的代码

1.组件的创建

const app = new Vue({
      el: "#app",
    })

2.注册使用组件

<div id="app">
    <cpn1></cpn1>
  </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>
  </template>


<script>
Vue.component("cpn1", {
      template: "#cpn1",
      data() {
        return {
          number1: 0,
          number2: 0,
          opt: "+",
        }
      },

      methods: {
        btn() {
          let opt = this.opt
          // 使用ref获取DOM元素，$refs调用
          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
        }
      },
    })
<script/>

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="./js/vue.js"></script>

<body>

  <div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
    <cpn3></cpn3>
  </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>
  </template>

  <template id="cpn2">
    <div class="input2">
      <input type="text" v-model.number="number1">
      <select name="" id="" v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="text" v-model.number="number2"><br />
      {{number1}} {{opt}} {{number2}}={{value}}
    </div>
  </template>

  <template id="cpn3">
    <div class="input3">
      <input type="text" v-model.number="number1">
      <select name="" id="" v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="text" v-model.number="number2"><br />
      {{number1}} {{opt}} {{number2}}={{getResult}}
    </div>
  </template>

  <script>
    Vue.component("cpn1", {
      template: "#cpn1",
      data() {
        return {
          number1: 0,
          number2: 0,
          opt: "+",
        }
      },

      methods: {
        btn() {
          let opt = this.opt
          // 使用ref获取DOM元素，$refs调用
          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
        }
      },
    })

    Vue.component("cpn2", {
      template: "#cpn2",
      data() {
        return {
          number1: 0,
          number2: 0,
          opt: "+",
          value: 0
        }
      },
      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
        }
      },
    })

    Vue.component("cpn3", {
      template: "#cpn3",
      data() {
        return {
          number1: 0,
          number2: 0,
          opt: "+",
          value: 0
        }
      },
      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
        }
      }
    })
    const app = new Vue({
      el: "#app",
    })
  </script>
</body>

</html>