vue实现页面中有一个按钮,2个输入框,点击按钮的时候,将输入框的内容展示到表格上页面中一个表格,用于展示很多用户信息,但是用户信息需要在钩子函数中被赋值>
时间: 2024-04-03 08:35:57 浏览: 9
好的,这个问题可以用以下步骤来实现:
1. 在 Vue 的 data 中定义一个 users 数组,用于存储用户信息。
2. 在页面中创建两个输入框和一个按钮,绑定到 data 中的两个变量和一个方法。
3. 在方法中获取输入框的值,并将其添加到 users 数组中。
4. 在页面中创建一个表格,绑定到 users 数组。
5. 在组件的 created 钩子函数中,使用异步请求获取用户信息,并将其赋值给 users 数组。
下面是具体的代码实现:
```
<template>
<div>
<input v-model="name" placeholder="请输入姓名"/>
<input v-model="age" placeholder="请输入年龄"/>
<button @click="addUser">添加用户</button>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
name: "",
age: "",
users: [],
};
},
methods: {
addUser() {
const newUser = { name: this.name, age: this.age };
this.users.push(newUser);
this.name = "";
this.age = "";
},
},
async created() {
const res = await fetch("https://api.example.com/users");
const data = await res.json();
this.users = data;
},
};
</script>
```
这样,当用户输入信息并点击按钮时,会将信息添加到表格中。同时,在组件创建时,会从 API 中获取用户信息并展示在表格上。注意,由于异步请求的原因,表格可能会在页面渲染后才被填充。