妙味课堂_vue.js制作的Tab栏目切换下载

2019年04月16日作者: 国瑞个人博客 522次浏览

妙味课堂_vue.js制作的Tab栏目切换下载

当初入门vue.js的时候，就是看的妙味课堂的视频，里面讲的通俗易懂，今天就来教一下大家如何快速使用vue.js实现栏目的切换，众所周知，vue.js使用数据驱动界面，所以我们在使用的使用，如果理解了这一点，那么我们将事半功倍。
源码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue选项卡</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<style type="text/css">

.red {
background: red;
}
</style>
<body>
<div id="app">


<input
type="button"
v-for="item,i in tabData"
v-bind:value="item.title"
v-bind:class='{red:i===index}'
v-on:click="tabHandle($event,i)"
>


<div
v-for="item,j in tabData"
v-bind:style='{display:j===index?"block":"none"}'
>
<span v-for="option in item.list">
<p>{{option.subTitle}}</p>
</span>
</div>

</div>

</body>
</html>
<script type="text/javascript">

//数据
let tabData = [
{
title:"体育",
list:[
{
subTitle:'体育新闻'
},
{
subTitle:'体育新闻'
},
{
subTitle:'体育新闻'
}
]
},
{
title:"娱乐",
list:[
{
subTitle:'娱乐新闻'
},
{
subTitle:'娱乐新闻'
},
{
subTitle:'娱乐新闻'
}
]
},
{
title:"今日关注",
list:[
{
subTitle:'今日关注'
},
{
subTitle:'今日关注'
},
{
subTitle:'今日关注'
}
]
}
];
console.log(tabData);
new Vue({
el:"#app",
data:{
tabData,
index:0
},
methods:{
tabHandle:function(j,i){
//这里的j就是传入的event对象
console.log(j);
//使用i来进行关联
this.index=i;
}

}

})

</script>

这样我们就实现了妙味课堂_vue.js制作的Tab栏目切换效果。