vue footer点击变色

 <header class="tab_nav">

             <div v-for="(item,index) in tabNav" @click="selected(index1,$event)" :key="index1" :class="{'active':item.active}">

                 <img :src="item.imgUrl" alt="" >

                 <span>{{item.title}}</span>

                 </div>

         </header>

1
//data内的数据
 tabNav:[

                     {title:'我参与的',active:true,imgUrl:'/src/images/index/participate.png'},

                     {title:'我发布的',active:false,imgUrl:'/src/images/index/publish.png'},

                     {title:'我抽奖的',active:false,imgUrl:'/src/images/index/luck_draw.png'}

                 ],

 //methods方法  tabNav栏切换导航

             selected: function(index){

                 this.tabNav.forEach(ele => ele.active = false );

                 this.tabNav[index1].active = true;

                 // this.getActivityList();

             },

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>vue</title>

         <style>

             .active {

                 color: red;

             }

         </style>

     </head>

     <body>

         <div id="example">

              <ul >

                  <li v-for="(item, index) in navLists" :class="{active:changeRed == index}" @click="colorChange(index)">{{item.text}}</li>

              </ul>

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script type="text/javascript">

             var vm = new Vue({

               el: '#example',

               data: {

                 isActive: false,

                 navLists: [

                     {

                         "text":"首页"

                     },

                     {

                         "text":"组件"

                     },

                     {

                         "text":"API"

                     },

                     {

                         "text":"我们"

                     }

                 ],

                 changeRed : 0

               },

               methods: {

                   colorChange: function(index) {

                       console.log(index)

                        this.changeRed = index;

                   }

               }

             })

         </script>

     </body>

 </html>

巴特西

vue footer点击变色

最新文章

热门文章