首页 > 编程语言 >视频直播网站源码,vue tabs标签页 点击才加载

视频直播网站源码,vue tabs标签页 点击才加载

时间:2023-06-12 14:22:25浏览次数:67  
标签:vue tabs 标签 源码 tab 加载

视频直播网站源码,vue tabs标签页 点击才加载

tabs标签页,默认加载显示第1个tab;

 


<el-tabs v-model="tTab" type="card" style="height:100%" @tab-click="tTabClick">
    <el-tab-pane label="Jupyter" name="Jupyter">
        <modelList></modelList>
    </el-tab-pane>
    <el-tab-pane label="Shell终端" name="shell" @tab-click="tTabClick">
        <el-tabs v-model="bTab" tab-position="left" style="height:100%" @tab-click="bTabClick" v-if="shellOpen">
            <el-tab-pane label="shell" name="shell">
                <shellList></shellList>
            </el-tab-pane>
        </el-tabs>
    </el-tab-pane>
    <el-tab-pane label="容器实例" name="docker" @tab-click="tTabClick">
        <el-button>33333333</el-button>
    </el-tab-pane>
    <el-tab-pane label="基本信息" name="baseInfo" @tab-click="tTabClick">
        <el-button>44444444</el-button>
    </el-tab-pane>

当tab.name等于shell时,才加截显示第二个。

 


tTabClick(tab,index){
    console.log("tTabClick");
    console.log(tab);
    console.log(index);
    this.tTab = tab.name
    if(tab.name == 'shell'){
        this.shellOpen = true;
    }
}, 

 

以上就是 视频直播网站源码,vue tabs标签页 点击才加载,更多内容欢迎关注之后的文章

 

标签:vue,tabs,标签,源码,tab,加载
From: https://www.cnblogs.com/yunbaomengnan/p/17474903.html

相关文章

  • Vue路由使用总结
    1、多级路由(1)配置路由规则,使用children配置项://编写配置项constrouter=newVueRouter({routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[{path......
  • 直播系统搭建,vue插件之vue-seamless-scroll 无缝滚动
    直播系统搭建,vue插件之vue-seamless-scroll无缝滚动使用 importvueSeamlessScrollfrom'vue-seamless-scroll' //注册组件 components:{  vueSeamlessScroll}  //template  <vue-seamless-scroll:data="Top10GatewayLog":class-option="optionSingleHeigh......
  • 6. Vue.js 表单输入绑定 #yyds干货盘点#【yyds干货盘点】
    学习目录:Vue.js简介Vue.js实例与数据绑定Vue.js计算属性和侦听器Vue.js条件渲染和列表渲染Vue.js事件处理Vue.js表单输入绑定Vue.js组件基础Vue.js组件通信Vue.js插槽Vue.js动态组件和异步组件Vue.js自定义指令Vue.js过渡和动画Vue.js混入Vue.js自定义事件和v-model......
  • vue项目base64编码或者参数里面有 +号问题
    当后端返回的链接的token或者参数里带有加号,浏览器打开链接时,页面通过使用this.$route.query.XXXX获取到的参数里+号会变成空格,导致解密后部分内容变成乱码。解决方法:1.链接是后端返回时,需后端处理,将+号编码变成%2B,再返回链接进行跳转即可2.链接是前端写的话,可直接使用encodeURIC......
  • vue Router的原理及传参方法
    VueRouter是Vue.js官方的路由管理器,它和Vue.js的核心深度集成,可以非常方便地实现单页面应用程序(SPA)的路由功能。VueRouter的原理主要是通过监听URL的变化,根据不同的URL显示不同的组件,从而实现页面的切换和跳转。具体来说,VueRouter的原理包括以下几个方面:路由配置......
  • Vue考试复习
    App.vue<scriptsetup>importHelloWorldfrom'./components/HelloWorld.vue'importLoginfrom'./components/Login.vue'//importCalcfrom'./components/Calc.vue'//importShoppingCartfrom'./components/ShoppingC......
  • std::string源码探秘和性能分析
    std::string源码探秘和性能分析2016年05月05日22:15:15std::string源码探秘和性能分析本文主要讲c++标准库的string的内部实现,以及对象拷贝的性能分析。文中采用的源码版本为gcc-4.9,测试环境为centos7,x86_64,涉及到指针等数据类型的大小也假定是在64环境位下。stl源码可以在......
  • dubbo源码深度分析:62个文档+中文注释+流程图+思维导图
    你好,我是田哥为满足群里大部分同学的需求,国庆期间,我重新对Dubbo源码进行梳理,一共7个内容:1、Dubbo核心知识总结2、Dubbo源码分析指南3、Dubbo服务发布流程4、Dubbo服务调用流程5、Dubbo中文版注释6、共62节Dubbo文档7、看Dubbo源码必备的知识点咱们话不多说,直接看内容。Dubbo核心知......
  • springboot+vue留守儿童爱心网站,附源码+数据库+论文+PPT,远程包安装运行
    1、项目介绍留守儿童爱心网站采用了B/S结构,JAVA作为开发语言,数据库采用了B/S结构,Mysql数据库进行开发。该系统包括前台操作,后台由管理员和用户两个部分,一方面,为用户提供首页、宣传新闻、志愿活动、爱心捐赠、个人中心、后台管理等功能;另一方面,为管理员提供首页、个人中心、用户管......
  • 前端 vue 自定义导航栏组件高度及返回箭头 自定义 tabbar 图标
    前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986效果图如下:使用方法//page.json采用矢量图标设置返回箭头,{"path":"pages/Home/Home",......