vue + element-ui tab切换_el-tab-pane 默认显示第二个-程序员宅基地

技术标签: vue  

1、安装element-ui

npm install element-ui --save

2、在main.js中引入element 和 css文件

复制代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

//使用element-ui
Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

复制代码

3、编写一个vue文件,这里我们命名为tabText.vue

a、使用element官方提供的api编写template

复制代码

<template>
    <div class="hello">
        
        <el-tabs v-model="activeName">
            <el-tab-pane label="tab1" name="first" :key="'first'">
                    <div style="background: yellow; display: inline">
                        tab1内容
                        tab1内容
                        tab1内容
                    </div>
            </el-tab-pane>

            <el-tab-pane label="tab2" name="second" :key="'second'">
                    <div style="background: green; display: inline">
                        tab2内容
                        tab2内容
                        tab2内容
                    </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 注释
       label:选项卡显示的title
       name:与选项卡绑定的activeName对应的标识符,表示选项卡的别名
     -->
    </div>
</template>


复制代码

b、script部分

复制代码

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                //默认第一个选项卡
                activeName: "first",
            }
        }
    }
</script>

//activeName:默认显示那个tab。
//activeName:el-tabs组件双向绑定的值,activeName值的取值是要对应el-tab-pane标记的name值

复制代码

 4、成果展示

  

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_18671415/article/details/104948377

智能推荐

第一、UITableView的使用大全-程序员宅基地

文章浏览阅读1.1k次。首先、对UITableView进行讲解,下面有对它进行实际的应用UITableView 显示大型内容的列表 单行,多列 垂直滚动,没有水平滚动 大量的数据集 性能强大,而且普遍存在于iPhone的应用程序中TableVie

使用redis存储kafka的偏移量_kafka redis 偏移-程序员宅基地

文章浏览阅读1.5k次。使用redis存储kafka的偏移量转自:Lu_Xiao_Yue使用Redis来记录偏移量,以前用receive方式时,使用zookeeper保存偏移量,不用自己保存偏移量,使用直连方式可以自己保存偏移量,更加灵活。在直连方式中,保存偏移量可以使用zookeeper,也可以使用mysql、redis等来保存偏移量,下面使用一种简单的方式用reids来保存偏移量package day03.Ka..._kafka redis 偏移

SPSS新手教程——对问卷数据进行处理之样本分布_spss样本在性别与年龄上的分布状态-程序员宅基地

文章浏览阅读8.1k次,点赞2次,收藏64次。在刚刚开始着手于一项研究时,利用问卷调查收集数据无疑是大多数人的选择,而如何处理收集到的数据有很多种方法,其中利用IBM SPSS Statistics软件来进行处理是比较方便且实用的,IBM SPSS Statistics软件的界面属于用户友好型,操作起来也较为简易。本次我们主要探讨如何对收集到的数据进行样本分布研究,以及如何建立样本分布表。一、打开数据文件本例中使用的是关于社交媒体使用情况对大学生自我评价影响的研究问卷所收集到的数据。首先对数据进行整理,将问卷中的问题放在列中,并根据问题对其_spss样本在性别与年龄上的分布状态

python for ArcGIS 绘制西安市板块地图_西安gis区域图-程序员宅基地

文章浏览阅读1.1k次。python for ArcGIS 绘制西安市板块地图_西安gis区域图

BIOS追code之PEI phase_pei阶段-程序员宅基地

文章浏览阅读7k次,点赞13次,收藏38次。SEC 阶段总述PEI阶段的功能任务:PEI划分:PEI阶段执行流程:PEI阶段执行流程描述及流程图阶段总述PEI(Pre-EFI Initialization,预先EFI初始化),虽然SEC阶段对CPU和CPU内的资源进行了初始化,但是PEI阶段可用的资源依旧十分有限,该阶段对内存进行初始化,主要功能是为DXE阶段准备执行环境,将所需要传递给DXE的信息组成HOB(Hand Off Block)列表,最终将控制权转交到DXE。UEFI具有模块化设计的特点,PEI就是一个模块。PEI Image的入口_pei阶段

介绍个好用的内网穿透工具:nps-程序员宅基地

文章浏览阅读6.4k次,点赞2次,收藏15次。最早开始接触内网穿透,是在调试微信支付的时候,微信需要回调一个公网地址,经过一番搜索,我选用了 natapp,优点是有免费隧道,缺点是公网域名和端口是随机分配的,偶尔调试用下还可以。后来,因为要映射公司和家里 Windows 远程连接的端口,natapp 那种随机域名和端口的服务,不满足我的需求。这时 frp 出现在可选列表里,只需要一台公网服务器,就可以搭建,通过服务端和客...

随便推点

梦幻星空html,制作梦幻星空效果图的滤镜教程-程序员宅基地

文章浏览阅读149次。一、把图像处理软件Photoshop打开,执行CTRL+N新建一个宽度和高度都为500像素的RGB图像,用黑色填充背景图层,再使用白色画笔工具在图像中点出一些白色的小圆点,这样看起来就像是满天的星星,刚好作为我们梦幻星空的背景图。二、执行菜单栏上的“视图-标尺”命令(快捷键:CTRL+R),显示出标尺以后,参考标尺上的刻度,在图像的中心分别拉出一条水平和垂直的参考线,然后创建一个新的图层,按住SH..._html梦幻星空

Data URL和图片_data url图片-程序员宅基地

文章浏览阅读1.7k次。Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type。本文中,我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。Data URL基本原理为什么Data URL是个好东西_data url图片

iOS 用内置浏览器Safari 打开网页_xcode safariservices打开网址-程序员宅基地

文章浏览阅读9.5k次。iOS 开发的时候,我们需要打开某个网页,可以写一个web页面,也可直接使用浏览器打开网址那么我们怎么样使用iOS 内置的浏览器打开网址呢?如下:ios 10 之前使用[[UIApplication sharedApplication]openURLopenURL:打开的网址NSURL *URL = [NSURL URLWithString:@"http://ww..._xcode safariservices打开网址

Android7.0中文文档 --- EditText_edittext的getaccessibilityclassname-程序员宅基地

文章浏览阅读1k次。android中文文档 EditView_edittext的getaccessibilityclassname

Linux ubuntu 安装maven_linux unbtu 安装maven-程序员宅基地

文章浏览阅读217次。首先去maven官网下载maven压缩包(此时最新版本为3.6.3)(PS:如果不是root权限,记得加 sudo )创建存放maven的新目录mkdir /usr/local/maven通过FTP工具或者XFTP工具把压缩包传输到指定目录,然后进入该目录解压缩cd /usr/local/maventar -xzvf apache-maven-3.6.3-b..._linux unbtu 安装maven

SpringSecurityOauth2+JWT实现单点登录_spring security oauth2 jwt 单点登录-程序员宅基地

文章浏览阅读3k次,点赞7次,收藏28次。单点登录的介绍单点登录(Single Sign On),简称为 SSO,SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。OAuth2 相关解释Resource owner(资源拥有者):拥有该资源的最终用户,他有访问资源的账号密码;Resource server(资源服务器):拥有受保护资源的服务器,如果请求包含正确的访问令牌,可以访问资源;Clie..._spring security oauth2 jwt 单点登录

推荐文章

热门文章

相关标签