vue 一个页面根据状态渲染不同的组件使用currentView动态渲染

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>

注：该文章只是自己开发时的记录。

vue 一个页面根据状态渲染不同的组件使用currentView动态渲染相关推荐

vue一个页面用两个以上页面时时刷新
vue一个页面用两个以上页面刷新 <template><el-tabs v-model="activeName" style="padding-left ...
vue 一个页面有点请求需要同时发送_前端性能优化，这些你都需要知道
来源: 海洋里的魔鬼鱼前言最近花了一些时间在项目的性能优化上,背后做了很多工作,但是最后依然没有达到自己想要的结果,有些失望,但是还是记录下自己的执着. 性能优化总结:减少请求次数.减小资源大小. ...
vue 多页面多模块分模块打包分插件安装_Vue渲染方式
Vue中的渲染方式总结可分四种: 原有模板语法,挂载渲染使用render属性,createElement函数直接渲染使用render属性,配合组件的template属性,createElement ...
vue 一个页面多个router-view如何配置子路由_前端开发：如何安装配置Vue路由？
大家好,我来了!本期为大家带来的Web前端学习知识是"前端开发:如何安装配置Vue路由?",喜欢Web前端的小伙伴,一起看看吧! Vue Router 是 Vue.js 官方的路由 ...
vue 一个页面多个router-view如何配置子路由_浅谈vue前端开发架构
通常我们开发出来的网页大都是通过.html文件,渲染与浏览器,也就是UI呈现给用户的. 一个UI page,一般会涉及到资源文件,样式排版,UI交互: 多个UI page,就涉及到UI交互响应: 那么 ...
vue一个页面发出多个异步请求_vue（6）—— vue中向后端异步请求
异步请求其实什么是异步请求已经不用多说了,通俗的说,就是整个页面不会刷新,需要更新的部分数据做局部刷新,其他数据不变. 学到这里,你应该用过jquery里的ajax了,所以很能理解了,不多说了.详细 ...
vue——一个页面实现音乐播放器
请忽略下面这段文字年关将至,时间好歹又多出了些许.却不敢过度消遣.岁月未曾饶过我,我亦不想饶过岁月.且将它塞得膨胀,让这一年看似加更充实. 不曾料想我一个爱些风花雪月.研墨行歌之人,却做起了碼农这一 ...
vue一个页面发出多个异步请求_Vue异步请求最佳实践
一.当前存在的问题目前项目前端请求后台数据的方式是这样的: 页面中method中dispatch到action action调用mutation,请求axios 请求到数据后存储到state中页面 ...
Vue之如何动态渲染.vue文件
动态渲染.vue文件其实存在于很多地方,例如近期做的表单设计器就是其中一个,生成vue代码后,应用在其它地方.要求下载完vue文件在其它项目中引入即可使用.那么动态渲染.vue项目如何去做呢? 1. ...

vue 一个页面根据状态渲染不同的组件使用currentView动态渲染

vue 一个页面根据状态渲染不同的组件使用currentView动态渲染相关推荐

最新文章

热门文章

vue 一个页面根据状态渲染不同的组件 使用currentView动态渲染

vue 一个页面根据状态渲染不同的组件 使用currentView动态渲染相关推荐

最新文章

热门文章

vue 一个页面根据状态渲染不同的组件使用currentView动态渲染

vue 一个页面根据状态渲染不同的组件使用currentView动态渲染相关推荐