编写页面实现定义一个user对象(username,age)通过钩子vue的钩子函数将用户信息展示在2个输入框上
时间: 2024-03-21 09:44:35 浏览: 116
好的,我可以帮你回答这个问题。
首先,我们需要在Vue实例中定义一个user对象,包括username和age两个属性。代码如下:
```
new Vue({
el: '#app',
data: {
user: {
username: '',
age: ''
}
},
mounted() {
this.getUserInfo();
},
methods: {
getUserInfo() {
// 在此处获取用户信息并将其赋值给user对象
this.user.username = '张三';
this.user.age = 20;
}
}
})
```
然后,在页面中使用v-model指令将user对象中的属性绑定到两个输入框上,代码如下:
```
<div id="app">
<input type="text" v-model="user.username">
<input type="text" v-model="user.age">
</div>
```
在mounted钩子函数中,我们可以调用getUserInfo方法来获取用户信息。在该方法中,我们可以通过调用API接口或者其他方式获取用户信息,然后将其赋值给user对象中的属性。
当用户信息更新后,页面上的两个输入框也会自动更新。这就是Vue的双向数据绑定机制的作用。
阅读全文