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">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.效果图 点击对应的标题就可以切换内容
如果帮到你就给我点个赞和关注吧
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！