1. !DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  6. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">
  7. <meta name="apple-mobile-web-app-title" content="Vue选项卡">
  8. <title>Vue实现选项卡</title>
  9. <script type="text/javascript" src="../js/vue.js"></script>
  10. </head>
  11. <style>
  12. * {
  13. padding: 0;
  14. margin: 0;
  15. }
  16. .box {
  17. width: 800px;
  18. height: 200px;
  19. margin: 0 auto;
  20. border: 1px solid #000;
  21. }
  22. .tabs li {
  23. float: left;
  24. margin-right: 8px;
  25. list-style: none;
  26. }
  27. .tabs .tab-link {
  28. display: block;
  29. width: 250px;
  30. height: 49px;
  31. text-align: center;
  32. line-height: 49px;
  33. background-color: #5597B4;
  34. color: #fff;
  35. text-decoration: none;
  36. }
  37. .tabs .tab-link.active {
  38. height: 47px;
  39. border-bottom: 2px solid #E35885;
  40. transition: .3s;
  41. }
  42. .cards {
  43. float: left;
  44. }
  45. .cards .tab-card {
  46. display: none;
  47. }
  48. .clearfix:after {
  49. content: "";
  50. display: block;
  51. height: 0;
  52. clear: both;
  53. }
  54. .clearfix {
  55. zoom: 1;
  56. }
  57. </style>
  58. <body>
  59. <div id="app" class="box">
  60. <ul class="tabs clearfix">
  61. <li v-for="(tab,index) in tabsName">
  62. <a href="#" class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a>
  63. </li>
  64. </ul>
  65. <div class="cards">
  66. <div class="tab-card" style="display: block;">这里是HTML教程</div>
  67. <div class="tab-card">欢迎来到CSS模块</div>
  68. <div class="tab-card">嗨，这里是Vue</div>
  69. </div>
  70. </div>
  71. </body>
  72. <script>
  73. var app = new Vue({
  74. el: "#app",
  75. data: {
  76. tabsName: [{
  77. name: "HTML",
  78. isActive: true
  79. }, {
  80. name: "CSS",
  81. isActive: false
  82. }, {
  83. name: "Vue",
  84. isActive: false
  85. }],
  86. active: false
  87. },
  88. methods: {
  89. tabsSwitch: function(tabIndex) {
  90. var tabCardCollection = document.querySelectorAll(".tab-card"),
  91. len = tabCardCollection.length;
  92. for(var i = 0; i < len; i++) {
  93. tabCardCollection[i].style.display = "none";
  94. this.tabsName[i].isActive = false;
  95. }
  96. this.tabsName[tabIndex].isActive = true;
  97. tabCardCollection[tabIndex].style.display = "block";
  98. }
  99. }
  100. })
  101. </script>
  102. </html>

vue 选项卡（转载）的更多相关文章

  1. vue 插件tab选项卡(转载)

    <template> <tab :options="tabOpt" :state.sync="stateIndex"></tab& ...

  2. Vue学习心得----新手如何学习Vue（转载）

    ps:本文并非原著,转载自:https://www.cnblogs.com/buzhiqianduan/p/7620102.html,请悉知 前言 使用vue框架有一段时间了,这里总结一下心得,主要为 ...

  3. 2017 年比较 Angular、React、Vue 三剑客(转载)

    为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事.现如今 Angular 和 React 非常流行,并且最近出现的新贵 VueJS 同样博得了很多人的关注.更重要的是,这只是一些 ...

  4. vue 选项卡

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  5. vue实例-转载

    http://blog.csdn.net/yuanyuanispeak/article/details/73526795

  6. 看JQ时代过来的前端，如何转换思路用Vue打造选项卡组件

    前言 在Vue还未流行的时候,我们都是用JQuery来封装一个选项卡插件,如今Vue当道,让我们一起来看看从JQ时代过来的前端是如何转换思路,用数据驱动DOM的思想打造一个Vue选项卡组件. 接下来, ...

  7. vue的选项卡功能

    选项卡:点击不同的按钮会显示不同的内容 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. vue调试神器vue-devtools安装

    vue-devtools安装 vue-devtools是一款用来调试Vue应用的Chrome插件,可极大提高开发者调试项目效率,接着我们说一下如何下载安装这个插件; 一. 从chrome商店直接下载安 ...

  9. day 73 初学vue (1)

    前情提要: vue 框架的初学习, 主要是,指令,属性,函数,计算属性,监听属性,钩子,生命周期,过滤器,阻止事件和综合案例todo list 学习准备,感谢学习资源: vue 官网:https:// ...

随机推荐

  1. 2017-2018-2 《网络对抗技术》20155322 Exp7 网络欺诈防范

    [-= 博客目录 =-] 1-实践目标 1.1-实践介绍 1.2-实践内容 1.3-实践要求 2-实践过程 2.1-简单应用SET工具建立冒名网站 2.2-ettercap DNS spoof 2.3 ...

  2. 【转载】COM 组件设计与应用（十一）—— IDispatch 及双接口的调用

    原文:http://vckbase.com/index.php/wv/1236.html 一.前言 前段时间,由于工作比较忙,没有能及时地写作.其间收到了很多网友的来信询问和鼓励,在此一并表示感谢.咳 ...

  3. css清除浮动clearfix:after的用法详解

    如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开.解决方法:  CSS代码: 复制代码 代码如下: .clearfix:after ...

  4. STM8S——Flash program memory and data EEPROM

    1.简介 STM8S内部的FLASH程序存储器和数据EEPROM是由一组通用寄存器来控制的:所以我们可以通过这些通用寄存器来编程或擦除存储器的内容.设置写保护.或者配置特定的低功耗模式.我们也可以自己 ...

  5. 180803-Spring定时任务高级使用篇

    Spring定时任务高级使用篇 前面一篇博文 <Spring之定时任务基本使用篇> 介绍了Spring环境下,定时任务的简单使用姿势,也留了一些问题,这一篇则希望能针对这些问题给个答案 I ...

  6. 增强学习训练AI玩游戏

    1.游戏简介 符号A为 AI Agent. 符号@为金币,AI Agent需要尽可能的接取. 符号* 为炸弹,AI Agent需要尽可能的躲避. 游戏下方一组数字含义如下: Bomb hit: 代表目 ...

  7. JDBC Mysql 驱动连接异常

    在做JDBC连接Mysql的时候遇到了三个异常: 第一个是:mysql8.0 caching_sha2_password 这个异常是由于是因为在mysql8.0之前的密码规则是mysql_native ...

  8. [Unity3D]MonoDeveloper快捷键（补全代码补全引用中文乱码tab转空格）

    Hello亲爱的观众朋友们大家好,我是09. vs支持各种插件,一般推荐用vs.不过总有人(例如我)由于各种原因用MonoDeveloper.苦于每次上网找各种设置,此处集中写下我用MonoDevel ...

  9. javascript this（上）

    javascript的this指向的是一个函数运行时动态绑定对象. this的4种常见的指向: 作为对象的方法调用 var obj={ name:"姚小白", getName:fu ...

  10. Spring Boot 学习目录

    之前一直做.net 的开发,后来发现C# 在生态方面和Java还是差了好多,而且目前有很多.net 方面的技术也是借鉴了Java相关的开发,所以最近准备学习了解一下java 相关的web开发,从中学习 ...