vue实现选项卡及选项卡切换效果


Posted in Javascript onApril 24, 2018

这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块。你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回过头来看我的实现代码。记住,通读Vue文档真的很重要,很重要!

这里的Vue以单文件的形式引入,另外代码在实现上会一步步的进行优化,客官不要着急!

下面是一个样式稍微丑陋,但功能OK的选项卡。

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8" />  
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">   
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"> 
  <meta name="apple-mobile-web-app-title" content="Vue选项卡"> 
  <title>Vue实现选项卡</title> 
  <script type="text/javascript" src="../js/vue.js"></script> 
 </head> 
 <style> 
  * { 
   padding: 0; 
   margin: 0; 
  } 
  .box { 
   width: 800px; 
   height: 200px; 
   margin: 0 auto; 
   border: 1px solid #000; 
  } 
  .tabs li { 
   float: left; 
   margin-right: 8px; 
   list-style: none; 
  } 
  .tabs .tab-link { 
   display: block; 
   width: 250px; 
   height: 49px; 
   text-align: center; 
   line-height: 49px; 
   background-color: #5597B4; 
   color: #fff; 
   text-decoration: none; 
  } 
  .tabs .tab-link.active { 
   height: 47px; 
   border-bottom: 2px solid #E35885; 
   transition: .3s; 
  } 
  .cards { 
   float: left; 
  } 
  .cards .tab-card { 
   display: none; 
  } 
  .clearfix:after { 
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
  } 
  .clearfix { 
   zoom: 1; 
  } 
 </style> 
 <body> 
  <div id="app" class="box"> 
   <ul class="tabs clearfix"> 
    <li v-for="(tab,index) in tabsName"> 
     <a href="#" rel="external nofollow" class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a> 
    </li> 
   </ul> 
   <div class="cards"> 
    <div class="tab-card" style="display: block;">这里是HTML教程</div> 
    <div class="tab-card">欢迎来到CSS模块</div> 
    <div class="tab-card">嗨,这里是Vue</div> 
   </div> 
  </div> 
 </body> 
 <script> 
  var app = new Vue({ 
   el: "#app", 
   data: { 
    tabsName: [{ 
     name: "HTML", 
     isActive: true 
    }, { 
     name: "CSS", 
     isActive: false 
    }, { 
     name: "Vue", 
     isActive: false 
    }], 
    active: false 
   }, 
   methods: { 
    tabsSwitch: function(tabIndex) { 
     var tabCardCollection = document.querySelectorAll(".tab-card"), 
      len = tabCardCollection.length; 
     for(var i = 0; i < len; i++) { 
      tabCardCollection[i].style.display = "none"; 
      this.tabsName[i].isActive = false; 
     } 
     this.tabsName[tabIndex].isActive = true; 
     tabCardCollection[tabIndex].style.display = "block"; 
    } 
   } 
  }) 
 </script> 
</html>

第一代选项卡的实现就先这样子,后面再改进。上面是代码,下面是效果图!Vue我也只是刚刚学入门吧,做了几个项目了,有什么问题我们可以一起探讨,一起进步,欢迎私信我!

vue实现选项卡及选项卡切换效果

Vue实现选项卡切换,具体代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>选项卡</title>
 <script src="../js/vue.js"></script>
 <style>
  li{
   list-style: none;
   float: left;
   margin-right: 20px;
  }
 </style>
</head>
<body>
 <div class="app">
  <ul>
   <li v-for="(item,index) in list" @click="tab(index)">{{item.tab}}
    <div v-show="item.show">
     {{item.title}}
    </div>
   </li>
  </ul>
 </div>
 <script>
  let obj=[
   {"tab":"选项一","show":true,"title":"1111"},
   {"tab":"选项二","show":false,"title":"2222"},
   {"tab":"选项三","show":false,"title":"3333"}
  ];
  var vm=new Vue({
   el:".app",
   data:{
    list:obj
   },
   methods:{
    tab:function(index){
     for(var i=0;i<this.list.length;i++){
      this.list[i].show=false;
      if(i==index){
       this.list[index].show=true;
      }
     }
    }
   }
  })
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的vue实现选项卡及选项卡切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
js实现移动端轮播图滑动切换
Dec 21 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 #Javascript
js 图片转base64的方式(两种)
Apr 24 #Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 #Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 #Javascript
vue webpack实用技巧总结
Apr 24 #Javascript
浅谈vue中.vue文件解析流程
Apr 24 #Javascript
vue-cli2.9.3 详细教程
Apr 23 #Javascript
You might like
简单的PHP多图上传小程序代码
2011/07/17 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
Python 连连看连接算法
2008/11/22 Python
python生成日历实例解析
2014/08/21 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
详解django2中关于时间处理策略
2019/03/06 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
python 异步async库的使用说明
2020/05/04 Python
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
科学发展观演讲稿
2014/09/11 职场文书
北京颐和园导游词
2015/01/30 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL