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 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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
小偷PHP+Html+缓存
2006/12/20 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Python实现的rsa加密算法详解
2018/01/24 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
同学会邀请书大全
2014/01/12 职场文书
承认错误的检讨书
2014/01/30 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
大学生党员自我批评
2014/02/14 职场文书
中考冲刺决心书
2014/03/11 职场文书
本科毕业生自荐信
2014/06/02 职场文书
优秀党员申报材料
2014/12/18 职场文书