[Vue3全面测试]AddDemo的多种测试汇总

AddDemo:

<template>
  <div>
    <input
      type="number"
      name="Num1"
      id="Num1"
      v-model="Num1"
    >+<input
      type="number"
      name="Num2"
      id="Num2"
      v-model="Num2"
    >=<label>{{SumNum}}</label>
    <br /><br />
    <button @click="CalSum">CalSum</button>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line space-before-function-paren
  data() {
    return {
      Num1: 0,
      Num2: 0,
      SumNum: 0
    }
  },
  methods: {
    // eslint-disable-next-line space-before-function-paren
    CalSum() {
      // eslint-disable-next-line no-undef
      this.SumNum = this.Num1 + this.Num2
    }
  }
}
</script>

AddDemo2:

<template>
  <div>
    <input
      type="number"
      name="Num1"
      id="Num1"
      v-model="Num1"
    > <input
      type="number"
      name="Num2"
      id="Num2"
      v-model="Num2"
    ><br />
    <label>Sum:{{SumNum}}</label>
    <br />
    <label>Sub:{{CalSub}}</label>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line space-before-function-paren
  data() {
    return {
      Num1: 0,
      Num2: 0,
      SubNum: 0
    }
  },
  computed: {
    SumNum: {
      // eslint-disable-next-line space-before-function-paren
      get() {
        const sum = this.Num1 + this.Num2
        return sum
      }
    },
    // eslint-disable-next-line space-before-function-paren
    CalSub() {
      return this.Num1 - this.Num2
    }
  }
}
</script>

AddDemo3:

<template>
  <div>
    <input
      type="number"
      name="Num1"
      id="Num1"
      v-model="Num1"
    > <input
      type="number"
      name="Num2"
      id="Num2"
      v-model="Num2"
    ><br />
    <label>Sum:{{SumNum}}</label>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line space-before-function-paren
  data() {
    return {
      Num1: 0,
      Num2: 0,
      SumNum: 0
    }
  },
  methods: {
    // eslint-disable-next-line space-before-function-paren
    CalSum() {
      // eslint-disable-next-line no-undef
      this.SumNum = this.Num1 + this.Num2
    }
  },
  watch: {
    // eslint-disable-next-line space-before-function-paren
    Num1(val) {
      this.CalSum()
    },
    // eslint-disable-next-line space-before-function-paren
    Num2(val) {
      this.SumNum = this.Num1 + this.Num2
    }
  }
}
</script>

AddDemo4:

<template>
  <div>
    <input
      type="number"
      name="Num1"
      id="Num1"
      v-model="Num1"
    > <input
      type="number"
      name="Num2"
      id="Num2"
      v-model="Num2"
    ><br />
    <label @click="CalSum">Sum:{{SumNum}}</label>
    <br /><br />
    <label @click="CalSum2">Sum:{{SumNum}}</label>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  // eslint-disable-next-line space-before-function-paren
  setup() {
    const Num1 = ref(0)
    const Num2 = ref(0)
    const SumNum = ref(0)
    // eslint-disable-next-line space-before-function-paren
    function CalSum() {
      SumNum.value = Num1.value + Num2.value
    }
    const CalSum2 = function () {
      SumNum.value = Num1.value + Num2.value
    }
    return {
      Num1,
      Num2,
      SumNum,
      CalSum,
      CalSum2
    }
  }
}
</script>