vue footer点击变色

89 阅读 0 评论 59 点赞

我是靠谱客的博主平淡耳机，最近开发中收集的这篇文章主要介绍vue footer点击变色，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1 <header class="tab_nav">
2             <div v-for="(item,index) in tabNav" @click="selected(index1,$event)" :key="index1" :class="{'active':item.active}">
3                 <img :src="item.imgUrl" alt="" >
4                 <span>{{item.title}}</span>
5                 </div>

6         </header>

1
//data内的数据
 tabNav:[
2                     {title:'我参与的',active:true,imgUrl:'/src/images/index/participate.png'},
3                     {title:'我发布的',active:false,imgUrl:'/src/images/index/publish.png'},
4                     {title:'我抽奖的',active:false,imgUrl:'/src/images/index/luck_draw.png'}
5                 ],

1 //methods方法  tabNav栏切换导航
2             selected: function(index){
3                 this.tabNav.forEach(ele => ele.active = false );
4                 this.tabNav[index1].active = true;
5                 // this.getActivityList();
6             },

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue</title>
 6         <style>
 7             .active {
 8                 color: red;
 9             }
10         </style>
11     </head>
12     <body>
13         <div id="example">
14              <ul >
15                  <li v-for="(item, index) in navLists" :class="{active:changeRed == index}" @click="colorChange(index)">{{item.text}}</li>
16              </ul>
17         </div>
18         <!-- 开发环境版本，包含了用帮助的命令行警告 -->
19         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
20         <script type="text/javascript">
21             var vm = new Vue({
22               el: '#example',
23               data: {
24                 isActive: false,
25                 navLists: [
26                     {
27                         "text":"首页"                     
28                     },
29                     {
30                         "text":"组件"                     
31                     },
32                     {
33                         "text":"API"                        
34                     },
35                     {
36                         "text":"我们"                     
37                     }
38                 ],
39                 changeRed : 0
40               },
41               methods: {
42                   colorChange: function(index) {
43                       console.log(index)
44                        this.changeRed = index;
45                   }
46               }
47              
48             })
49         </script>
50     </body>
51 </html>