学习目标：
使用 Elemenet UI 框架中的 el-tabs 组件
学习内容：
平时在做项目时，tab切换效果几乎是必不可少的，下来整理一个最近做的一个小功能：el-tabs
效果图：
html：
<el-tabs v-model="activeName" :tab-position="tabPosition" @tab-click="changeTab">
<el-tab-pane label="会员购" name="vip">
<div>会员购</div>
</el-tab-pane>
<el-tab-pane label="推广优惠券" name="coupon">推广优惠券</el-tab-pane>
</el-tabs>说明：
v-model：当前选中项
:tab-position：tab栏显示方向
@tab-click：切换tab栏的事件文章来源：https://www.toymoban.com/news/detail-506590.html
JS：文章来源地址https://www.toymoban.com/news/detail-506590.html
data(){
return{
activeNames: ['1'],
activeName:'coupon',
tabPosition:'left'
}
},
methods:{
changeTab(tab){
console.log('触发tab',tab.name)
}
}到了这里，关于element UI el-tabs组件使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
