[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>