Vue tab栏切换增强版

最新推荐文章于 2023-12-23 00:18:35 发布

晴雨恋

最新推荐文章于 2023-12-23 00:18:35 发布

阅读量727

点赞数

分类专栏： vue tab切换文章标签： vue tab切换难度点的

本文链接：https://blog.youkuaiyun.com/weixin_45441561/article/details/102987131

版权

这篇博客详细介绍了如何使用Vue.js实现一个增强版的tab栏切换功能，包括数据渲染、v-for、v-if、v-bind、v-click指令的应用，以及动态切换active类名和内容显示。通过这个实例，读者可以深入理解Vue中的数据绑定和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue tab栏切换增强版

tab栏切换增强版

题目描述
- 点击tab栏内容区域显示对应的内容
- 如点击 SECTION 1 则内容区域显示对应 SECTION 1 的内容同时当前 SECTION的字体颜色变成蓝色
训练目标
- 能够理解vue 中的数据渲染
- 能够理解 v-for, v-if , v-bind , v-click 的使用
- 能够理解 vue 中调用函数的时候传递参数

训练提示

提供的数据如下

1、	数据
   list: [{
               id: 1,
               title: 'Section 1',
               content: 'content1'
             }, {
                id: 2,
                title: 'Section 2',
                content: 'content2'
             }, {
                 id: 3,
                 title: 'Section 3',
                 content: 'content3'
             }, {
                 id: 4,
                 title: 'Section 4',
                 content: 'content4'
             }, {
                 id: 5,
                 title: 'Section 5',
                 content: 'content5'
             }, {
                 id: 6,
                 title: 'Section 6',
                 content: 'content6'
             }]   

2、 HTML 结构如下 
<div id="app" class="vertical-tab">
    <!-- 左侧tab栏 -->
    <ul class="nav nav-tabs1">
        <li class="active"><a href="#"> Section 1 </a></li>
        <li class=""><a href="#"> Section 2 </a></li>
        <li class=""><a href="#"> Section 3 </a></li>
	</ul>
	<!-- 内容区域 -->
    <div class="tab-content tabs">
        <div class="tab-pane  fade active">
            <h3>Section 1</h3>
            <p>content1</p>
        </div>
        <div class="tab-pane  fade">
            <h3>Section 2</h3>
            <p>content2</p>
        </div>
        <div class="tab-pane  fade">
            <h3>Section 3</h3>
            <p>content3</p>
        </div>
        <div class="tab-pane  fade">
            <h3>Section 4</h3>
            <p>content4</p>
        </div>
        <div class="tab-pane  fade">
            <h3>Section 5</h3>
            <p>content5</p>
        </div>
        <div class="tab-pane  fade">
            <h3>Section 6</h3>
            <p>content6</p>
        </div>
    </div>
    <ul class="nav nav-tabs2">
        <!-- 右侧tab栏 -->
        <li class=""><a href="#"> Section 4 </a></li>
        <li class=""><a href="#"> Section 5 </a></li>
        <li class=""><a href="#"> Section 6 </a></li>
    </ul>
</div>

第一步：将 list 中的数据title 渲染到左侧和右侧的tab栏中
- 注意：左右各渲染3条数据
第二步：将 list 中的数据title 和 content 渲染到内容区域
第三步：给左侧的tab栏中的li绑定事件实现动态切换active 类名
- 注意：给点击的当前li 添加类名 active 即可让当前的li字体颜色改变 (类名是 active的样式已经在CSS中提前定义好 )
- 其他 li 需要移除类名 active
第四步：拿到当前点击li的索引让内容区域中对应索引类名是 tab-pane 的 div 显示
- 注意：给类名是 tab-pane 的 div 添加类名 active 即可让当前div 显示出来 (类名是 active的样式已经在CSS中提前定义好 )
- 其他 tab-pane 的 div 需要移除类名 active
第五步：给右侧的tab栏中的li绑定事件实现动态切换active 类名
- 注意：给点击的当前li 添加类名 active 即可让当前的li字体颜色改变 (类名是 active的样式已经在CSS中提前定义好 )
第六步：拿到当前点击li的索引让内容区域中对应索引类名是 tab-pane 的 div 显示
- 注意：这里需要注意索引问题：
  - 点击右侧第一个div 的时候需要让内容区域中的第 4个 div 显示出来
  - 点击右侧第2个div 的时候需要让内容区域中的第 5个 div 显示出来

操作步骤

HTML

<div id="app" class="vertical-tab">
    <!-- 左侧tab栏 -->
    <ul class="nav nav-tabs1">
        <li class="active"><a href="#"> Section 1 </a></li>
        <li class=""><a href="#"> Section 2 </a></li>
        <li class=""><a href="#"> Section 3 </a></li>
	</ul>
	<!-- 内容区域 -->
    <div class="tab-content tabs">
        <div class="tab-pane  fade active">
            <h3>Section 1</h3>
            <p>content1</p>
        </div>
        <div class="tab-pane  fade">
            <h3>Section 2</h3>
            <p>content2</p>
        </div>
        <div class="tab-pane  fade">
            <h3>Section 3</h3>
            <p>content3</p>
        </div>
        <div class="tab-pane  fade">
            <h3>Section 4</h3>
            <p>content4