介绍
这篇文章将为大家详细讲解有关利用vue怎么实现一个选项卡栏切换二选一功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
HTML部分
& lt; template>
,& lt; div id=癮pp"比;
& lt;才能div 类=皌abWrap"比;
,,& lt; !——,这个结构是选项卡导航,并给其绑定对应的点击事件,在点击事件的回调中
,才能去控制对应内容的显示隐藏和样式的修改即:选项卡的切换——比;
,,& lt; div 类=皌abNav"比;
,,,& lt; div 类=皀avOne", @click=皌abOne"祝辞tab1
,,,& lt; div 类=皀avTwo", @click=皌abTwo"祝辞tab2
,,& lt;/div>
,,& lt; !——,这个结构是选项卡导航对应的内容,——比;
,,& lt; div 类=皌abContent"比;
,,,& lt; !——,通过v-show控制隐藏,同一时刻隐藏一个显示一个,就实现了标签栏的切换效果了,——比;
,,,& lt; div 类=皀avOneBox", v-show=皊howTabOne"在我是切换1 & lt;/div>
,,,& lt; div 类=皀avTwoBox", v-show=皊howTabTwo"祝辞小姐:am tab2
,,& lt;/div>
& lt;才能/div>
,& lt;/div>
& lt;/template>
js部分
& lt; script>
export default {
,名字:“app",
,数据(){
return {才能
,,,showTabOne:真的,,//,二选一选项卡切换
,,,showTabTwo:假的,,//,二选一选项卡切换
,,};
},
,方法:{//才能,二选一选项卡栏切换
tabOne才能(),{
,,/*
,,,点击tab1的时候,让tab1显示,tab2隐藏,即showTabOne为真的,showTabTwo为假
,,,同时修改tab1的样式使其“高亮“,注意不要忘了修改tab2的样式,使其“不高亮“。
,,,点击tab2的时候,也是同理。
,,*/,,this.showTabOne =,真的;
,,this.showTabTwo =,假;
,,document.querySelector (“.navOne") .style.backgroundColor =,“# fff";
,,document.querySelector (“.navTwo") .style.backgroundColor =,“# e3e3e3";
,,document.querySelector (“.navOne") .style.color =,“# 3985 ec";
,,document.querySelector (“.navTwo") .style.color =,“# 80868 d";
,,},//才能,二选一选项卡栏切换
tabTwo才能(),{
,,this.showTabTwo =,真的;
,,this.showTabOne =,假;
,,document.querySelector (“.navOne") .style.backgroundColor =,“# e3e3e3";
,,document.querySelector (“.navTwo") .style.backgroundColor =,“# fff";
,,document.querySelector (“.navTwo") .style.color =,“# 3985 ec";
,,document.querySelector (“.navOne") .style.color =,“# 80868 d";
,,},
},
}；
& lt;/script> css部分
& lt; style lang=發ess"比;
.tabNav {
,宽度:126 px;
,高度:30 px;
,这个特性:2 px;
,背景颜色:# e3e3e3;
,显示:flex;
,对齐项目:中心;
,justify-content: space-evenly;
,.navOne {
,,宽度:60 px;
,,身高:26 px;
,,这个特性:2 px;
,,背景颜色:# fff;
,,颜色:# 3985电子商务;
,,字体大小:14 px;
,,粗细:500;
,,显示:flex;
,,justify-content:中心;
,,对齐项目:中心;
,,光标:指针;
,}
,.navTwo {
,,宽度:60 px;
,,身高:26 px;
,,颜色:# 80868 d;
,,这个特性:2 px;
,,字体大小:14 px;
,,粗细:500;
,,显示:flex;
,,justify-content:中心;
,,对齐项目:中心;
,,光标:指针;
,}
}
.tabContent {
,margin-top: 8 px;
,.navOneBox {
,,背景颜色:#论坛;
,}
,.navTwoBox {
,,背景颜色:# baf;
,}
}
& lt;/style> 关于利用vue怎么实现一个选项卡栏切换二选一功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
