编写一个组件页面，在template中有个按钮，三个输入框，在scriot中定义一个数组变量其值为 [4，5]，将数组变量解构赋值给其中两个输入框，点击按钮，调用箭头函数，将两个输入框中的数字相加，赋给第三个输入框

<template>
<div>
<input v-model="num1" type="number">
<input v-model="num2" type="number">
<input v-model="num3" type="number">
<button @click="addNums">Add</button>
</div>
</template>

<script>
export default {
data() {
return {
nums: [4, 5],
num1: '',
num2: '',
num3: ''
}
},
mounted() {
[this.num1, this.num2] = this.nums
},
methods: {
addNums: () => {
const sum = Number(this.num1) + Number(this.num2)
this.num3 = sum
}
}
}
</script>

相关问题

编写一个组件页面，在template中有个按钮，三个输入框，在scriot中定义一个数组变量其值为[4，5]

<template>
<div>
<input type="text" v-model="input1">
<input type="text" v-model="input2">
<input type="text" v-model="input3">
<button @click="handleClick">点击</button>
</div>
</template>

<script>
export default {
data() {
return {
arr: [4, 5],
input1: '',
input2: '',
input3: ''
}
},
methods: {
handleClick() {
console.log(this.arr);
}
}
}
</script>