Vue实现简单选项卡效果 Vue实现简单选项卡效果

本文实例为大家分享了Vue实现简单选项卡效果的具体代码，供大家参考，具体内容如下
【Vue实现简单选项卡效果】效果图

文章图片

1.头部选项卡
点击切换下标ID 传递一个参数回去，active绑定选中样式

{{item.title}}

2.完整HTML
默认使用V-show来切换，获取盒子下标，没有dom操作
当然，Vue官方文档也不推荐V-if和V-for同时使用

{{item.title}}
{{item.content}}

3.Vue
下标默认为0

4.完整代码

Document* {margin: 0; padding: 0; list-style: none; } #app ul {width: 800px; background: black; opacity: .9; margin: 100px auto; display: flex; justify-content: space-between; } #app li {width: 300px; text-align: center; cursor: pointer; color: #fff; } #app li:hover {cursor: pointer; } #app li.active {background: #03a9f4; } .mycontent {width: 800px; height: 500px; margin: 0 auto; background: #03a9f4; opacity: .8; display: flex; justify-content: center; align-items: center; }
{{item.title}}
{{item.content}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。