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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
JS中的phototype详解
Feb 04 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
微信小程序封装多张图片上传api代码实例
Dec 30 Javascript
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
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php对象工厂类完整示例
2018/08/09 PHP
php实现映射操作实例详解
2019/10/02 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
用javascript实现画板的代码
2007/09/05 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
python概率计算器实例分析
2015/03/25 Python
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
python创造虚拟环境方法总结
2019/03/04 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
python递归函数用法详解
2020/10/26 Python
Python调用Redis的示例代码
2020/11/24 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
合伙协议书
2014/04/23 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
旅游投诉信范文
2015/07/02 职场文书
寒假生活随笔
2015/08/15 职场文书