vue tabNav 点击

最新推荐文章于 2025-07-29 10:11:08 发布

weixin_30879169

最新推荐文章于 2025-07-29 10:11:08 发布

阅读量237

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/1032473245jing/p/8920828.html

本文介绍了一个使用Vue.js编写的简易Tab导航组件，通过v-for循环遍历数据并利用@click事件来切换选中的Tab项，同时实现了相应的样式变化。

 1 <template>
 2     <div class="content">
 3         <header class="tab_nav">
 4             <div v-for="(item,index) in tabNav" :key="index" @click = "selected(index, $event)" :class="{'active':item.active}">
 5                 <img :src="item.imgUrl" alt="icon">
 6                 <span>{{item.title}}</span>
 7             </div>
 8         </header>
 9         <main></main>
10         <footer></footer>
11     </div>
12 </template>
13 
14 <script>
15     export default {
16         data() {
17             return {
18                 tabNav:[
19                     {title:'我参与的',active:true,imgUrl:'/src/images/index/participate.png'},
20                     {title:'我发布的',active:false,imgUrl:'/src/images/index/publish.png'},
21                     {title:'我抽奖的',active:false,imgUrl:'/src/images/index/luck_draw.png'},
22                 ]
23             }
24         },
25         methods: {
26             selected: function(index) {
27                 this.tabNav.forEach(e => e.active = false);
28                 this.tabNav[index].active = true;
29             }
30         }
31     }
32 </script>
33 
34 <style scoped lang="less">
35     .border{
36         content: '';
37         display: block;
38         width: 1px;
39         height: 1.5rem;
40         background: #D9D9D9;
41         position: absolute;
42         top: 0.75rem;
43     }
44     .tab_nav{
45         display: flex;
46         width: 100%;
47         height: 2.5rem;
48         background: #fff;
49         opacity: 0.5rem;
50         &>div{
51             height: 2.5rem;
52             width: 33.33%;
53             opacity: 0.5;
54             text-align: center;
55             &:nth-of-type(2) {
56                 position: relative;
57                 &::before{
58                     .border;
59                     left: 0;
60                 }
61                 &::after{
62                     .border;
63                     right: 0;
64                 }
65             }
66             &>img{
67                 width: 1rem;
68                 height: 1rem;
69                 display: block;
70                 margin:  0.5rem auto 0;
71             }
72             &>span{
73                 display: block;
74                 font-size: 0.5rem;
75                 color: #69728E;
76                 line-height: 0.8rem;
77             }
78         }
79         &>div.active {
80             color: #69728E;
81             opacity: 1;
82         }84 
85 
86     }
87 
88 </style>