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 width: 500px;
82 border: 1px solid orangered;
83 text-align: center;
84 height: 250px;
85 line-height: 250px
86 }
87 </style>
