vue + element-ui tab切换

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：选项卡显示的titlename：与选项卡绑定的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、成果展示

vue + element-ui tab切换相关推荐

vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
[vue] 使用vue写一个tab切换
[vue] 使用vue写一个tab切换 v-for循环,利用下标和v-show显示`<div id="app"><ul class="tabs" ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...

vue + element-ui tab切换

vue + element-ui tab切换相关推荐

最新文章

热门文章