编写一个组件页面,在template中有一个按钮,三个输入框 在script中定义一个数组变量其值为[4,5],将数组变量解构赋值给其中两个输入框, 点击按钮,调用箭头函数,将两个输入框中的数字相加,赋给第三个输入框。
时间: 2023-05-31 07:05:15 浏览: 80
<template>
<div>
<input v-model="num1" />
<input v-model="num2" />
<input v-model="result" />
<button @click="addNums">计算</button>
</div>
</template>
<script>
export default {
data() {
return {
nums: [4, 5],
num1: 4,
num2: 5,
result: "",
};
},
created() {
[this.num1, this.num2] = this.nums;
},
methods: {
addNums: () => {
this.result = parseInt(this.num1) + parseInt(this.num2);
},
},
};
</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>
编写一个组件页面,在template中有一个按钮,三个输入框
<template>
<div>
<input type="text" v-model="input1">
<input type="text" v-model="input2">
<input type="text" v-model="input3">
<button @click="clickHandler">提交</button>
</div>
</template>
<script>
export default {
data() {
return {
input1: '',
input2: '',
input3: ''
}
},
methods: {
clickHandler() {
console.log(this.input1, this.input2, this.input3)
}
}
}
</script>