1.在当前vue页面导入所需要的组件
组件目录：
注：index.vue就是要渲染的页面
在data中定义变量：
components: {
submitVeterans: () => import("./submitVeterans"),
veteransWait: () => import("./veteransWait"),
veteransFail: () => import("./veteransFail"),
veteransSuccess: () => import("./veteransSuccess"),
},
2.根据接口返回的状态值渲染不同的组件
3.完整代码
<template>
<div class="appoint">
<div :is="currentView" @getStatus="getStatus"></div>
</div>
</template>
<script>
import { getMyApply } from "@/api/course";
export default {
components: {
submitVeterans: () => import("./submitVeterans"),
veteransWait: () => import("./veteransWait"),
veteransFail: () => import("./veteransFail"),
veteransSuccess: () => import("./veteransSuccess"),
},
data() {
return {
currentView: "",
status: "", // 状态值
token:
"eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiIxNzYzMDIxNjAyNCIsInNjb3BlIjpbImFsbCJdLCJuaWNrbmFtZSI6IlBPUE_mjqLntKLogIU5NTIiLCJpZCI6MTM0NjcyNDIxMjc1NjgyODE2MiwiZXhwIjoxNjI4MTQ0MjUzLCJqdGkiOiI4MmQzNTc1OC1mNDNkLTQ1YTMtYTA3MS1hZGUwNWY4NGQ0OTkiLCJjbGllbnRfaWQiOiJwb3J0YWwtYXBwIn0.hodSrrsplqOfMrUJ6aVSLMdnS93flc0uhR-lB5d0gZBi_6ApJkOES0zf0SUzxPxAimoPQfRZ3I9X_rzunWJMgNCXNdjKcIhDtn08o24Cc89_j8mWityp_NAgBI6S0LYynEM0lxLdyeuLIXoqjYclIBBXeM_lDFtBBAGaAFdjHII",
// token: "",
};
},
created() {
this.getactivity();
},
methods: {
getactivity() {
getMyApply(this.token).then((res) => {
console.log(res);
console.log(res.data.code);
if (res.data.code == 200) {
//获取他的返回值 用返回值判断
if (this.status == 1) {
// 显示页面：提交资料
this.currentView = "submitVeterans";
// 显示页面：审核失败
// this.currentView = "veteransFail";
} else if (this.status == 2) {
// 显示页面：审核中
this.currentView = "veteransWait";
} else if (this.status == 3) {
// 显示页面：审核成功
this.currentView = "veteransSuccess";
} else {
// 显示页面提交资料
this.currentView = "veteransFail";
}
}
});
},
},
};
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
</style>
注：该文章只是自己开发时的记录。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79324.html
