vue 选项卡（转载）

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>