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 相关文章推荐
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
Vue操作Storage本地化存储
Apr 29 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基础陷阱题(变量赋值)
2012/09/12 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
js中判断控件是否存在
2010/08/25 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
js查找节点的方法小结
2015/01/13 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
webpack4简单入门实例
2018/09/06 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
js实现图片实时时钟
2020/01/15 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
python使用marshal模块序列化实例
2014/09/25 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
Python单例模式的两种实现方法
2017/08/14 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
浅谈django orm 优化
2018/08/18 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
python print出共轭复数的方法详解
2019/06/25 Python
如何基于Python批量下载音乐
2019/11/11 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
思想品德自我鉴定
2013/10/12 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
先进工作者获奖感言
2014/02/08 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python