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的执行速度
Jan 23 Javascript
javascript使用activex控件的代码
Jan 27 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
Vuex简单入门
Apr 19 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
react配置antd按需加载的使用
2019/02/11 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
基于python的Paxos算法实现
2019/07/03 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
pandas按条件筛选数据的实现
2021/02/20 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
C语言面试题
2015/10/30 面试题
应聘教师自荐信
2013/10/12 职场文书
岗位职责风险点
2014/03/12 职场文书
搞笑创意广告语
2014/03/17 职场文书
聘任书模板
2014/03/29 职场文书
小学家长学校培训材料
2014/08/24 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
2019银行竞聘书
2019/06/21 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL