vue二选一tab栏切换新做法实现


Posted in Vue.js onJanuary 19, 2021

问题描述

在我们做项目的过程中,有时候会要做一些tab栏切换效果。有两个tab的,有三个tab的,甚至有五六七八个tab的。平常我们直接拿饿了么的tab组件用就行了,但是偶尔自己闲着没事,自己写个两个tab切换效果的,即二选一效果。闲话少说,上动态效果图

vue二选一tab栏切换新做法实现

本案例适合两个tab的(三个tab的可以仿照我的写,如果是四五个tab用饿了么组件会更快些)

代码如下

HTML部分

<template>
 <div id="app">
  <div class="tabWrap">
   <!-- 这个结构是tab导航,并给其绑定对应的点击事件,在点击事件的回调中
   去控制对应内容的显示隐藏和样式的修改即:tab的切换-->
   <div class="tabNav">
    <div class="navOne" @click="tabOne">tab1</div>
    <div class="navTwo" @click="tabTwo">tab2</div>
   </div>
   <!-- 这个结构是tab导航对应的内容 -->
   <div class="tabContent">
    <!-- 通过v-show控制隐藏,同一时刻隐藏一个显示一个,就实现了tab栏的切换效果了 -->
    <div class="navOneBox" v-show="showTabOne">我是切换1</div>
    <div class="navTwoBox" v-show="showTabTwo">i am tab2</div>
   </div>
  </div>
 </div>
</template>

js部分

<script>
export default {
 name: "app",
 data() {
  return {
   showTabOne: true, // 二选一tab切换
   showTabTwo: false, // 二选一tab切换
  };
 },
 methods: {
  // 二选一tab栏切换
  tabOne() {
   /*
    点击tab1的时候,让tab1显示,tab2隐藏,即showTabOne为true,showTabTwo为false
    同时修改tab1的样式使其"高亮",注意不要忘了修改tab2的样式,使其"不高亮"。
    点击tab2的时候,也是同理。
   */
   this.showTabOne = true;
   this.showTabTwo = false;
   document.querySelector(".navOne").style.backgroundColor = "#fff";
   document.querySelector(".navTwo").style.backgroundColor = "#e3e3e3";
   document.querySelector(".navOne").style.color = "#3985EC";
   document.querySelector(".navTwo").style.color = "#80868D";
  },
  // 二选一tab栏切换
  tabTwo() {
   this.showTabTwo = true;
   this.showTabOne = false;
   document.querySelector(".navOne").style.backgroundColor = "#e3e3e3";
   document.querySelector(".navTwo").style.backgroundColor = "#fff";
   document.querySelector(".navTwo").style.color = "#3985EC";
   document.querySelector(".navOne").style.color = "#80868D";
  },
 },
};
</script>

css部分

<style lang="less">
.tabNav {
 width: 126px;
 height: 30px;
 border-radius: 2px;
 background-color: #e3e3e3;
 display: flex;
 align-items: center;
 justify-content: space-evenly;
 .navOne {
  width: 60px;
  height: 26px;
  border-radius: 2px;
  background-color: #fff;
  color: #3985ec;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
 }
 .navTwo {
  width: 60px;
  height: 26px;
  color: #80868d;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
 }
}
.tabContent {
 margin-top: 8px;
 .navOneBox {
  background-color: #bfa;
 }
 .navTwoBox {
  background-color: #baf;
 }
}
</style>

到此这篇关于vue二选一tab栏切换新做法实现的文章就介绍到这了,更多相关vue tab栏切换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 #Vue.js
vue element el-transfer增加拖拽功能
Jan 15 #Vue.js
Vue实现多页签组件
Jan 14 #Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 #Vue.js
Vue中引入svg图标的两种方式
Jan 14 #Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 #Vue.js
vue 递归组件的简单使用示例
Jan 14 #Vue.js
You might like
我的论坛源代码(八)
2006/10/09 PHP
PHP下10件你也许并不了解的事情
2008/09/11 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
PHP钩子实现方法解析
2019/05/21 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
JavaScript中的类继承
2010/11/25 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
python映射列表实例分析
2015/01/26 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Python列表切片用法示例
2017/04/19 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Windows下安装Scrapy
2018/10/17 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
会计专业自荐信
2014/06/03 职场文书
教师个人学习总结
2015/02/11 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
OpenCV实现普通阈值
2021/11/17 Java/Android