vue实现标签页切换/制作tab组件详细教程
vue实现标签页切换【详细】
在vue中实现标签页切换有如下2种方式：
① 使用动态组件
② 使用路由
当然你可以使用第三方ui来实现，比如Element Plus。不过自己试着实现一下会更好。
这里讲一下第一和第二种方式，以组件实现为重点，那么就先讲一下使用路由的方式。
使用路由实现 Tab切换
首先，在router文件夹的index.js文件中，配置子页面的路由
{
path: '/Profile',
name: 'Profile',
meta:{
showHead:true,
path:'个人中心'
},
component: () => import('../views/ProfileView.vue'),
children:[
{
path:'article',
name:'article',
component: () => import('../components/Article.vue')
},
{
path:'picture',
name:'picture',
component: () => import('../components/Picture.vue')
}
]
},
以防万一你不知道，path使用‘/xx’的是根路径，使用’xxx‘会自动拼接。
以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL。
接着放出我们的组合拳与
<div class="column">
<router-link to="/profile/article" name="article">文章</router-link>
<router-link to="/profile/picture" name="picture">图片</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
使用 component 动态组件实现 Tab切换
大概的思路是这样的：首先，每一个ｔａｂ都有一个ｐａｎｅｌ。
其次，我们希望ｔａｂ和他的ｐａｎｅｌ能够关联起来，那么他们之间最好有什么相同的特征，所以我们就想到了ｉｄ。我们可以给每组的男嘉宾和女嘉宾都用上相同的编号，这样我们只需要看编号就知道谁对应谁啦！
最后，大家都知道，约会是一对一的。因此，我们男一(mtab-1)和女一(panel-1)约会的时候，其他的女嘉宾是不能出场的。
控制组件的显示隐藏可以用v-if/v-show。
用isShow来记录当前出场的男嘉宾(mtab)。
用数组panelShowList来记录每位女嘉宾(panel)是否出场的。
大概的框架是这样的：
<div class="column">
<button class="mtab" id="mtab-0" @click="clickTab">0</button>
<button class="mtab" id="mtab-1" @click="clickTab">1</button>
<button class="mtab" id="mtab-2" @click="clickTab">文章</button>
</div>
<div class="content">
<div class="panel" id="panel-0" v-if="panelShowList[0]">
我是内容
</div>
<div class="panel" id="panel-1" v-if="panelShowList[1]">
我是内容1
</div>
<div class="panel" id="panel-2" v-if="panelShowList[2]">
我是内容2
</div>
</div>
不要忘记isShow和panelShowList是有初始值的。开场男女嘉宾，安排！
data(){
return{
isShow:0,
panelShowList:[1,0,0]
}
}
差点忘了要给出场男嘉宾一个特写，给被选中的ｔａｂ增加一些醒目的样式。
<div class="column">
<button class="mtab" id="mtab-0" @click="clickTab" :class="{highlightTab:panelShowList[0]}">0</button>
<button class="mtab" id="mtab-1" @click="clickTab" :class="{highlightTab:panelShowList[1]}">1</button>
<button class="mtab" id="mtab-2" @click="clickTab" :class="{highlightTab:panelShowList[2]}">文章</button>
</div>ps: panelShowList存储了女嘉宾们的出场状态，数组下标为男女嘉宾相同的编号。
接着，我们开始思考怎么样才能让ｔａｂ和ｐａｎｅｌ这两边的嘉宾能够成双成对的出现呢？
答：那当然得让他们相互牵手成功！
前面我们已经在双方的ｉｄ上做好了手脚，那么现在就简单了。
首先，获取男方的ｉｄ，不对，是tab的id。
clickTab(e){
console.log('我的编号是',e.srcElement.id.charAt(5))
this.isShow = e.srcElement.id.charAt(5)
接着我们需要主持人来呼唤女嘉宾出场，不是。是利用watch侦听器对isShow属性的监听。只要isShow改变就代表当前出场的男嘉宾改变了，因此立马通知前一位女嘉宾退场，对应的女嘉宾出场。
watch:{
isShow(newValue,oldValue){
this.panelShowList[oldValue]=0
this.panelShowList[newValue]=1
}
}
这里我们扩展一个知识点，那就是watch的深层监听。
watch 默认是浅层的：被侦听的属性，仅在被赋新值时，才会触发回调函数——而嵌套属性的变化不会触发。如果想侦听所有嵌套的变更，你需要深层侦听器：
ok，到了这里，我们就成功实现了标签页切换功能。
总结
到此这篇关于vue实现标签页切换/制作tab组件的文章就介绍到这了,更多相关vue标签页切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于vue3中轻松实现switch功能组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
本篇文章主要介绍了Vue-router 类似Vuex实现组件化开发的示例，具有一定的参考价值，有兴趣的可以了解一下2017-09-09
这篇文章主要介绍了vue中jsonp的使用方法,文章从安装开始展开具体的vue中jsonp的使用详细内容,需要的朋友可以参考一下，希望对大家有所帮助2021-11-11
这篇文章主要给大家介绍了关于Vue生命周期的那些事,在使用vue开发过程中经常会接触到生命周期的问题,但对于每个钩子函数都做了什么,应用场景比较模糊,希望通过这次梳理让自己清楚一些,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了Vue 动画效果、过渡效果,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
Vue中的methods、computed计算属性和watch监听属性的使用和区别解析
这篇文章主要介绍了Vue中的methods、computed计算属性和watch监听属性的使用和区别,本文通过示例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue限制文本框输入数字的正确姿势，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了关于Element-UI中slot的用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了解决vue表单为空也能提交的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家详细介绍了Vue如何使用jsmind实现生成脑图,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下2024-03-03
最新评论