Vue2基础——Tap栏切换案例

最新推荐文章于 2021-12-16 21:22:26 发布
最新推荐文章于 2021-12-16 21:22:26 发布
阅读量1.7k 收藏 7
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45054614/article/details/119298500
版权

本篇文章需要有一丢丢的Vue基础 ，或者可以参考Vue官网，本篇文章会用到的知识点有 v-on,v-bind,v-if,v-for
运行的时候 需要引入Vue.js文件

业务需求：

  • 点击tab 栏内容去切换相对应的显示内容
  • 比如：点击栏目一 内容区域显示栏目一 内容一

在这里插入图片描述

可以自己先敲一下，想想该怎么实现这个业务需求呢？
下面我会提供静态代码，只需要在这个基础上进行修改即可

我也会在文章的最后，写一遍demo

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>

CSS代码

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .vertical-tab {
            width: 920px;
            margin: 100px auto;
        }
        
        .vertical-tab .nav {
            list-style: none;
            width: 200px;
        }
        
        .vertical-tab .nav-tabs1 {
            border-right: 3px solid #e7e7e7;
        }
        
        .vertical-tab .nav-tabs2 {
            border-left: 3px solid #e7e7e7;
        }
        
        .vertical-tab .nav a {
            display: block;
            font-size: 18px;
            font-weight: 700;
            text-align: center;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 10px 20px;
            margin: 0 0 1px 0;
            text-decoration: none;
        }
        
        .vertical-tab .tab-content {
            color: #555;
            background-color: #fff;
            font-size: 15px;
            letter-spacing: 1px;
            line-height: 23px;
            padding: 10px 15px 10px 25px;
            display: table-cell;
            position: relative;
        }
        
        .vertical-tab .nav-tabs1 {
            float: left;
        }
        
        .vertical-tab .tabs {
            width: 500px;
            box-sizing: border-box;
            float: left;
        }
        
        .vertical-tab .tab-content h3 {
            font-weight: 600;
            text-transform: uppercase;
            margin: 0 0 5px 0;
        }
        
        .vertical-tab .nav-tabs2 {
            float: right;
        }
        
        .tab-content .tab-pane {
            display: none;
        }
        
        .tab-content .tab-pane.active {
            display: block;
        }
</style>

data数据

list: [{
                    id: 1,
                    title: '栏目一',
                    content: '内容一'
                }, {
                    id: 2,
                    title: '栏目二',
                    content: '内容二'
                }, {
                    id: 3,
                    title: '栏目三',
                    content: '内容三'
                }, {
                    id: 4,
                    title: '栏目四',
                    content: '内容四'
                }, {
                    id: 5,
                    title: '栏目五',
                    content: '内容五'
                }, {
                    id: 6,
                    title: '栏目六',
                    content: '内容六'
                }]

Demo示例
思路：

  1. 首先循环数据，将数据渲染到页面
  2. 给tab栏 绑定事件，实现类名active的切换
  3. 拿到当前点击的索引，让对应的内容显示出来

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<!--这个地方吧css样式代码copy过来就可以了 -->
<!-- 我这里为了代码的可读性 就不复制了-->

</head>
<div id="app" class="vertical-tab">
    <!-- 左侧tab栏 -->
    <ul class="nav nav-tabs1">
<!--第一步、渲染数据 使用v-for循环这个li标签 
  使用v-for 去循环 数据list，item 这个是自定义的，index是索引。然后使用{{item.title}}
-->
<!--
	第二步 要判断左边和右边的数据，123 到左边 456 到右边
	需要使用v-if 来判断 当前的索引值
-->
<!--
 第三步
	绑定一个active类名，并且判断当前索引值 显示类名
	:class = "curIndex == index?"active":"""
  使用三元运算符 判断这个curINdex 和index 的索引是否相等 相等就使用active 类名
-->

<!-- 
第四步
添加点击事件 v-on实现tap切换
-->

        <li v-on:click="handel(index,0)" :calss = "curIndex == index?"active":"" " v-for = "(item,index) in list" v-if="index < list.index/2"><a href="#"> {{item.title}} </a></li>
	</ul>
	<!-- 内容区域 -->
    <div class="tab-content tabs">
    <!--第二步、渲染内容 使用v-for循环这个li标签 
  使用v-for 去循环 数据list，item 这个是自定义的，index是索引。然后使用{{item.title}}
-->
        <div class="tab-pane  fade active"
        :calss = "curIndex == index?"active":"" "  v-for = "(item,index) in list">
            <h3>{{item.title}}</h3>
            <p>{{item.content}}</p>
        </div>
   
    </div>
    <ul class="nav nav-tabs2">
        <!-- 右侧tab栏 -->
       <!--循环右侧数据  并且渲染

      -->
        <li v-on:click="handel(index,1)" :calss = "curIndex == index?"active":"" " v-for = "(item,index) in list">
        <a href="#"> {{item.title}} </a></li>
        
    </ul>
</div> 
<!--这里的vue.js文件需要到官网去下载，并且引入 -->
<!--否则无法执行vue -->
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
//这里的el,就是获取到上面盒子的id值为app的值
	el:"#app",
	//data 为数据源
	data:{
	curIndex:0,//当前选项的索引
	list: [{
                    id: 1,
                    title: '栏目一',
                    content: '内容一'
                }, {
                    id: 2,
                    title: '栏目二',
                    content: '内容二'
                }, {
                    id: 3,
                    title: '栏目三',
                    content: '内容三'
                }, {
                    id: 4,
                    title: '栏目四',
                    content: '内容四'
                }, {
                    id: 5,
                    title: '栏目五',
                    content: '内容五'
                }, {
                    id: 6,
                    title: '栏目六',
                    content: '内容六'
                }]
   },
   methods:{
   //添加点击事件
   //传递参数，index,和自定义属性
   handel:function(index,flag){
	if(flag){
	this.curIndex = index;
}else{
	this.curIndes = index;
  }
}
   }

})


</script>


</body>
</html>
小hu同学
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue写一个组件
08-27
主要介绍了vue组写一个组件,需要的朋友可以参考下
简单的 vue 点击tap 切换背景色
xiaosi1413的博客
12-03 1175
自己刚写的，大家有很好的方法留言交流 下面是实例代码 html部分 <div id="app"> 定义class 和点击事 <p :class={a} @click="fn">点击</p> <p :class="b ? 'b':''" @click="fn2()">55555</p> &l...
vue 实现tap选项卡切换效果
夜阑珊妖妖
12-12 1587
实现效果：常见的 tap选项卡切换效果 代码： <template> <div class="tapbox"> <ul class="tapqiehuan"> <li v-for="(item, index) in tapli" :key="index" :class="[index...
VUE写一个简单的表格实例
12-10
目录： 1、脚本式开发. 2、工程化开发 3、工程化和脚本的区别 4、来个table试试水 4,1、目标 4.2、思路 4.3、设计与编码 4.4、效果 5、业务分离 6、功能拓展——个性化设置     正文： 我以前是后端（asp.net）开发，会点js、jQuery，但是不会写js特效，至于css嘛，拿来用现成的可以，自己动手写就不会了。 发现现在前端开发的势头太猛了，有一点要干掉后端的感觉，于是萌发了想要学一学前端开发的想法。那么前端三大框架，先学哪一个呢？就先学学Vue吧，为啥呢？很简单呀，他只有三个英文字母，好记好写。 Vue的学习时间比较短，
Vue写一个简单的倒计时按钮功能
08-27
主要介绍了基于Vue写一个简单的倒计时按钮功能，在项目开发的过程，经常会遇到发送验证码，点击之后有60秒倒计时的按钮，今天小编就给大家分享实例代码，需要的朋友参考下吧
详解使用vue实现tab 切换操作
08-30
主要介绍了详解使用vue实现tab操作,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue.js实现tab切换效果
热门推荐
Coding_Jia的博客
05-24 5万+
Vue是一个小巧轻便的JavaScript库。它有一个简单易懂的API，能够让开发者在开发web应用的时候更加简易便捷。实际上，一直让Vue引以为豪的是它的便捷性、执行力、灵活性。 目前在学习Vue.js。在学习的时候需要把手动操作DOM的思维去掉，因为Vue是数据驱动，不需要手动操作DOM。他通过一些特殊的hmtl语法，将DOM和数据绑定起来。一旦创建了绑定，DOM就会和数据保持同步，每当变更了
请使用 Vue 路由相关知识动手实现 Tab 栏切换案例，要求如下。① 创建一个 components/Message.vue 组件，用来展示页面内容。② 创建 3 个子路由，分别是“待付款” “
XGK8750的博客
12-16 6480
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&...
09-Vue实现tab栏切换案例
解启超
03-15 2252
选项卡案例 1、 HTML 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul { ...
用Vue前端路由实现tab栏切换
紫月i的博客
10-20 3993
新建一个app.vue文件，写入下方代码 <template> <div class="container"> <div class="tab"> <router-link to="/a" name='a'>管理1</router-link><br> <router-link to="/b" name='b'>管理2</router-link><br> <router-l
vue手写一个自定义操作的工作流
06-15
vue手写一个自定义操作的工作流：适用简单的、想要手写的、不借用三方插件的工作流开发。样式自定义，可随意扩展、随意添加条件、自定义条件
使用vue-router与v-if实现tab切换遇到的问题及解决方法
12-09
vue-router 该如何使用 忽然碰到一个常见的问题，明明可以使用 v-if / v-show 可以的解决的问题，有没有必要是使用 vue-router来解决。 比如常见的 tab 切换。一时间，我有些犹豫了，有没有必要滥用 vue-router。那到底何时用才叫合理呢？ 先上代码，用两种方式实现的效果 使用vue-router router import Tab1 from './components/tab/TabOne' import Tab2 from './components/tab/TabTwo' import Tab3 from './components/tab/Tab
基于Vue实现tab栏切换内容不断实时刷新数据功能
11-29
先说一下产品需求，就是有几个tab栏，每个tab栏对应的ajax请求不一样，内容区域一样，内容为实时刷新数据，每3s需要重新请求，返回的数据在内容区域展示，每点击一次tab栏需停止其他tab栏ajax请求，防止阻塞，首次加载页面的时候又不能5个ajax同时请求，只需要请求第一个就好 也没有必要建立5个区域，控制显示隐藏，浪费性能，业务代码就不贴了，把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt
vue的tap手势插件
08-09
vue的tap手势插件
vue自定义tap指令及tap事件的实现
10-18
Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,这篇文章主要介绍了vue自定义tap指令及tap事件的实现 ,需要的朋友可以参考下
Vue 基础TODO案例分析.md
05-23
TODO案例分析.md
Vue tab栏切换案例
07-17
vue tab栏切换
【Vue2】Vue功能实例——基于尚硅谷教程ToDoList案例（一）
02-09
【Vue2】Vue功能实例——基于尚硅谷教程ToDoList案例（一）
vue基础代码演示——temp.json
03-21
如果觉得百度云下载速度慢可以在此处下载，如果没有积分也可以直接私信博主直接给文件，所需积分只是给个鼓励，谢谢支持！！！
vue实现tab栏切换案例
最新发布
05-26
好的，下面是一个简单的 Vue 实现 tab 栏切换的案例： 1. 在组件中定义数据和方法 ```html <template> <div> <div class="tab"> <div v-for="(item, index) in tabs" :key="index" :class="{ active: currentIndex === index }" @click="changeTab(index)" > {{ item }} </div> </div> <div class="content"> {{ tabsContent[currentIndex] }} </div> </div> </template> <script> export default { data() { return { tabs: ['tab1', 'tab2', 'tab3'], tabsContent: ['content1', 'content2', 'content3'], currentIndex: 0 } }, methods: { changeTab(index) { this.currentIndex = index } } } </script> <style scoped> .tab { display: flex; } .tab > div { padding: 10px; cursor: pointer; } .tab > div.active { background-color: #eee; } .content { padding: 20px; } </style> ``` 2. 在父组件中使用 Tab 组件 ```html <template> <div> <tab></tab> </div> </template> <script> import Tab from './Tab.vue' export default { components: { Tab } } </script> ``` 这里只是一个简单的实现，如果需要更复杂的功能，可以根据实际需求进行扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值