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 相关文章推荐
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
在JavaScript中使用timer示例
May 08 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
详解Vue中的基本语法和常用指令
Jul 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
德生PL990的分析评价
2021/03/02 无线电
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
解决python flask中config配置管理的问题
2019/07/26 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
python中实现栈的三种方法
2020/12/19 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
化验室技术员岗位职责
2013/12/24 职场文书
市场营销求职信范文
2014/02/21 职场文书
个人承诺书
2014/03/26 职场文书
应届生面试求职信
2014/07/02 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python