【计算器案例】

最新推荐文章于 2024-09-26 16:55:21 发布

2201_75322845

最新推荐文章于 2024-09-26 16:55:21 发布

阅读量45

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2201_75322845/article/details/129911181

版权

1.组件的创建


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

2.注册使用组件

 <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>
  </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>
  
    <template id="cpn4">
    <div class="input4">
      <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>

全部代码

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<script src="./js/vue.js"></script>
 
<body>
 
  <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>
  </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>
  
    <template id="cpn4">
    <div class="input4">
      <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
          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
        }
      }
    })
    
       Vue.component("cpn4", {
      template: "#cpn4",
      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>