实现异步数据读取与渲染
在这一步中,你将学习如何实现异步数据读取与渲染功能。
打开提供项目中的 index.html
文件。
在Vue实例的 data
选项中,添加一些属性以供后续使用。
new Vue({
el: "#app",
data() {
return {
list: [],
indexUser: "Tom",
isShow: false,
isShowRbtn: false,
isShowUserList: true,
isShowOtherUser: false,
isShowIndexUser: true,
user: "",
buttonIndex: 2
};
}
});
在 new Vue()
实例中,在 mounted()
生命周期钩子中添加以下代码,使用Axios从 ./js/userList.json
获取用户数据:
new Vue({
el: "#app",
data: {
//...
},
mounted() {
this.getData();
},
methods: {
async getData() {
// 使用axios从服务器获取数据
const res = await axios({
url: "./js/userList.json"
});
this.list = res.data;
}
}
});
在登录窗口中,更新代码以在下拉菜单中显示获取到的用户数据:
<!-- 原始代码: -->
<!-- <p>
选择一个用户:
<select id="selectUser">
<option value="1">Tom</option>
</select>
</p>
<p>当前用户:Tom</p> -->
<!-- 更新后的代码: -->
<p v-if="!isShow">
选择一个用户:
<select v-model="indexUser" id="selectUser">
<option v-for="item in list" :value="item.name">{{item.name}}</option>
</select>
</p>
<p v-else>当前用户:{{user.name}}</p>
完成此步骤后,登录窗口将异步显示从 ./js/userList.json
获取的用户数据。
效果如下: