vue 一个页面根据状态渲染不同的组件 使用currentView动态渲染
1.在当前vue页面导入所需要的组件组件目录:注:index.vue就是要渲染的页面在data中定义变量:components: {submitVeterans: () => import("./submitVeterans"),veteransWait: () => import("./veteransWait"),veteransFail: () => import("./v
·
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>
注:该文章只是自己开发时的记录。
更多推荐
已为社区贡献36条内容
所有评论(0)