编写一个组件页面,在template中有个按钮,三个输入框,在scriot中定义一个数组变量其值为 [4,5],将数组变量解构赋值给其中两个输入框,点击按钮,调用箭头函数,将两个输入框中的数字相加,赋给第三个输入框
时间: 2023-06-02 16:01:51 浏览: 101
<template>
<div>
<input v-model="input1" type="number">
<input v-model="input2" type="number">
<input v-model="input3" type="number">
<button @click="addNumbers">Add Numbers</button>
</div>
</template>
<script>
export default {
data() {
return {
numbers: [4, 5],
input1: 0,
input2: 0,
input3: 0
}
},
mounted() {
[this.input1, this.input2] = this.numbers;
},
methods: {
addNumbers: () => {
this.input3 = parseInt(this.input1) + parseInt(this.input2);
}
}
}
</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中有个按钮,三个输入框,在scriot中定义一个数组变量其值为 点击复制后,将打开C知道体验页
<template>
<div>
<input v-model="input1" placeholder="请输入第一个值" />
<input v-model="input2" placeholder="请输入第二个值" />
<input v-model="input3" placeholder="请输入第三个值" />
<button @click="copyValues">复制</button>
</div>
</template>
<script>
export default {
data() {
return {
input1: '',
input2: '',
input3: '',
values: ['value1', 'value2', 'value3']
}
},
methods: {
copyValues() {
this.values = [this.input1, this.input2, this.input3]
window.open('https://www.example.com/C-experience-page')
}
}
}
</script>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)