Vue稍微高级一点的选项卡

Vue稍微高级一点的选项卡—动态组件

 1 <template>
 2   <div id="app" class="app">
 3     <ul class="tabUl">
 4       <li @click="toggle(index, tab.view)" v-for="(tab, index) in tabs" :class="{active: active == index}">
 5           {{tab.type}}
 6       </li>
 7     </ul>
 8     <div class="wrapper">
 9       <!--每次切换组件都会重新渲染，无法保留组件上的数据。这时可以使用 keep-alive 将组件保留在内存中，避免重新渲染-->
10       <keep-alive>
11         <component :is="currentView"></component>
12       </keep-alive>        
13     </div>
14   </div>
15 </template>
16 
17 <script>
18   import Tabone from './tabs/Tab-one.vue'
19   import Tabtwo from './tabs/Tab-two.vue'
20   import Tabthree from './tabs/Tab-three.vue'
21 
22 export default {
23   name: 'app',
24   data () {
25     return {
26        currentView: "Tabone",
27        active: 0,
28        tabs: [
29          {
30            type: '新闻',
31            view: "Tabone"
32          },
33          {
34            type: '音乐',
35            view: "Tabtwo"
36          },
37          {
38            type: '娱乐',
39            view: "Tabthree"
40          }
41        ]
42     }
43   },
44   methods: {
45     toggle(i, v) {
46         this.active = i;
47         this.currentView = v;
48     }
49   },
50   components: {
51     "Tabone": Tabone,
52     "Tabtwo": Tabtwo,
53     "Tabthree": Tabthree
54   }
55 }
56 </script>
57 
58 <style>
59 
60 .app{
61   position: absolute;
62   top: 100px;
63   left: 50%;
64   transform: translateX(-50%);
65 }
66 .tabUl::after{
67   display: block;
68   content: "";
69   clear: both;
70 }
71 .active {
72   color: red;
73   border-bottom: 1px solid red;
74 }
75 ul li {
76   padding: 0 15px;
77   float:left;
78   list-style: none;
79 }
80 .wrapper{
81    500px;
82   border: 1px solid orangered;
83   text-align: center;
84   height: 250px;
85   line-height: 250px
86 }
87 </style>