vue实现tab切换附带css样式

最新推荐文章于 2023-08-25 13:45:00 发布

洪洪呀

最新推荐文章于 2023-08-25 13:45:00 发布

阅读量986

点赞数 1

分类专栏： css3 vue web前端文章标签： css html vue.js

本文链接：https://blog.csdn.net/H_hongai/article/details/120666042

版权

web前端同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

css3

9 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

vue实现tab切换附带css样式

vue会用到tab切换的地方很简单几句代码实现可复用直接上代码我是写在html页面中的

1.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab切换</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style>
			#app {
				width: 800px;
				height: 500px;
				margin: 50px auto;
			}

			/*  tab样式 */
			.tab_nav {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 10px;
			}

			.tab_nav .navTitle {
				height: 90px;
				line-height: 90px;
				width: 100%;
				text-align: center;
				font-size: 16px;
				font-family: Alibaba PuHuiTi;
				color: #333;
				background-color: #DB7093;
				margin-right: 10px;
			}
			
			/* 让最后一个标题没有margin */
			.navTitle:last-child {
				margin-right: 0;
			}

			.active {
				position: relative;
				color: #FFFFFF;
			}

			.active::after {
				content: "";
				position: absolute;
				width: 100rpx;
				height: 4rpx;
				background-color: #1F75FE;
				left: 0px;
				right: 0px;
				bottom: 0px;
				margin: auto;
			}
			
			.nav_item{
				padding: 20px;
				background-color: rgb(211 206 206);
				color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 标题 -->
			<div class="tab_nav">
				<div class="navTitle" v-for="(item,index) in navList" :key="index">
					<div :class="{'active':isActive === index}" @click="checked(index)">{{item.title}}</div>
				</div>
			</div>

			<!-- 内容块 -->
			<div class="nav_item" v-if="isActive==0">第一块内容</div>
			<div class="nav_item" v-if="isActive==1">第二块内容</div>
		</div>

		<script type="text/javascript">
			let app = new Vue({
				el: '#app',
				data: {
					isActive: 0,
					navList: [{
							index: 0,
							title: '第一块'
						},
						{
							index: 1,
							title: "第二块"
						}
					],
				},

				methods: {
					//  tab事件
					checked(index) {
						const _this = this
						_this.isActive = index
					},
				},
			});
		</script>
	</body>
</html>

2.效果图点击对应的标题就可以切换内容
在这里插入图片描述

如果帮到你就给我点个赞和关注吧

洪洪呀

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue实现tab切换附带css样式

vue实现tab切换附带css样式vue会用到tab切换的地方很简单几句代码实现可复用直接上代码我是写在html页面中的1.代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>tab切换</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"&gt
复制链接

扫一扫