页面有一个按钮两个输入框,点击按钮将输入框内容展示到表格上用vue做
时间: 2024-03-21 11:38:45 浏览: 130
好的,我可以给你提供一个简单的示例代码,你可以参考一下:
在HTML文件中,你需要添加按钮、两个输入框和表格:
```html
<div id="app">
<input v-model="input1" type="text">
<input v-model="input2" type="text">
<button v-on:click="addData">添加</button>
<table>
<tr>
<th>输入框1</th>
<th>输入框2</th>
</tr>
<tr v-for="(data, index) in dataList" :key="index">
<td>{{ data.input1 }}</td>
<td>{{ data.input2 }}</td>
</tr>
</table>
</div>
```
在Vue的实例中,你需要定义data中的变量和方法:
```javascript
new Vue({
el: '#app',
data: {
input1: '',
input2: '',
dataList: []
},
methods: {
addData: function() {
this.dataList.push({
input1: this.input1,
input2: this.input2
});
this.input1 = '';
this.input2 = '';
}
}
});
```
这段代码中,我们定义了三个变量:input1、input2和dataList,分别表示两个输入框的值和表格中的数据。同时我们定义了一个方法addData,当点击按钮时,该方法会将两个输入框的值添加到dataList中,并且将输入框的值清空。
当你在浏览器中打开该HTML文件时,就可以看到一个包含两个输入框和一个按钮的页面,当你输入数据并点击按钮时,数据会被添加到表格中。
阅读全文