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进度条示例
Apr 28 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 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下读取文本文件的代码
2008/07/02 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
php简单实现数组分页的方法
2016/04/30 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
chrome原生方法之数组
2011/11/30 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
JS+CSS实现过渡特效
2021/01/02 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
Python函数参数类型*、**的区别
2015/04/11 Python
Python中的index()方法使用教程
2015/05/18 Python
python实现简单爬虫功能的示例
2016/10/24 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
机械工程学院大学生求职信
2014/05/25 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
写给父母的感谢信
2015/01/22 职场文书
2015年信访工作总结
2015/04/07 职场文书
2016春节放假通知范文
2015/08/18 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
MySQL 逻辑备份 into outfile
2022/05/15 MySQL