vue中tab选项卡的实现思路


Posted in Javascript onNovember 25, 2018

今天分享下vue中tab选项卡的套路,废话不多说,直接上效果图

vue中tab选项卡的实现思路

应用场景

•不同注册和登录方式切换
•操作选项切换 如保存和取消
•后台管理系统中各菜单选项切换等
•新闻标题分类切换 如关注 推荐 热点等分类

主要思路

•点击不同 tab 获取 tab 选项卡下标并为其动态绑定一个class(选中状态时的样式)
•点击时使 tab 对应的内容下标与 tab 选项卡下标保持一致
•使用 v-show / v-if 指令控制内容显示与隐藏

代码如下

<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>tab</title>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 <style>
 html,
 body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #58596b;
 }
 .active {
  color: #fff;
  background: #e74c3c;
 }
 #app {
  width: 800px;
  height: 400px;
  margin: 100px auto;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
 }
 .menuList {
  width: 800px;
  height: 60px;
  background-color: #33344a;
 }
 ul {
  width: 100%;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  color: #717181;
  font-size: 16px;
  line-height: 60px;
 }
 ul li {
  flex: 1;
  text-align: center;
  cursor: pointer;
 }
 .tabCon {
  width: 700px;
  margin: 0 auto;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
  background-color: #fff;
 }
 </style>
</head>
<body>
 <div id="app">
 <div class="menuList">
  <ul>
  <li v-for="(item,index) in list" :key="item.id" :class="{active:num==index}" @click="getNum(index)">
   {{item}}
  </li>
  </ul>
 </div>
 <div class="tabCon">
  <div v-for='(itemCon,index) in tabContents' v-show="index == num">
  {{itemCon}}
  </div>
 </div>
 </div>
 <script>
 var app = new Vue({
  el: "#app",
  data() {
  return {
   num: 0,
   list: ["张三丰", "独孤求败", "周伯通"],
   tabContents: [
   "张三丰,名君宝,字符元,道号三丰。武林至尊,民族英雄 、内拳始祖、太极始祖、武学泰斗、龙行书法始祖张三丰集各派绝学于一身,威震武林,造诣已达炼虚合道至高极境 [1] ,元末明初真人,武当山道人,武当派始祖,正史记载宋理宗淳佑七年(1247年) 出生辽东,14岁考取文武状元,18岁担任博陵县令,(1280年)辞官出家修道,拜火龙真人为师,武林盟主张三丰时隐时现,至今行踪不定,清朝道光年间曾出现在峨眉山。", 
   "独孤求败,自号“剑魔”,纵横江湖三十馀载,杀尽仇寇,败尽英雄,天下更无抗手,无可奈何,惟隐居深谷,以雕为友。呜呼,生平求一敌手而不可得,诚寂寥难堪也。在小说中从未出场过,只曾在人物的口中提及。",
   "周伯通不是金大师小说中的主角,也不是塑造的最丰满、最完善的形象,更不是侠客或英雄的代表,而且就武侠小说最基本的要素-武功、武学所达到的境界来说,周伯通也不是绝顶高手,但毫无疑问,周伯通是金大师所塑造的所有人物中最有意思的一位,至少是最有意思的人物之一。"],
  }
  },
  methods: {
  getNum(index) {
   this.num = index;
  }
  }
 })
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的vue中tab选项卡的实现思路,希望对大家有所帮助,如果大家有任何疑问小编会及时回复大家的!

Javascript 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
js添加绑定事件的方法
May 15 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 #Javascript
vscode 开发Vue项目的方法步骤
Nov 25 #Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 #Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 #Javascript
vue组件实践之可搜索下拉框功能
Nov 25 #Javascript
详解离线安装npm包的几种方法
Nov 25 #Javascript
vue将单页面改造成多页面应用的方法
Nov 25 #Javascript
You might like
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
PHP7数组的底层实现示例
2019/08/25 PHP
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
pyenv命令管理多个Python版本
2017/03/26 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
大学军训感想
2014/02/12 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
教师工作失职检讨书
2014/09/18 职场文书
成都人事代理协议书
2014/10/25 职场文书
导游词幽默开场白
2019/06/26 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis