1. 首页
  2. PYTHON
  3. vue 选项卡，转载

vue 选项卡，转载

•python•阅读 2278
  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 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" >这里是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>

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。