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 相关文章推荐
Vue 的 v-model用法实例
Nov 23 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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
用PHP来写记数器(详细介绍)
2006/10/09 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
python实现图片文件批量重命名
2020/03/23 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
python3下pygame如何实现显示中文
2020/01/11 Python
python生成word合同的实例方法
2021/01/12 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
现代化办公人员工作的自我评价
2013/10/16 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
2019个人半年工作总结
2019/06/21 职场文书