<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点击变色的更多相关文章

  1. android 自定义控件——（五）按钮点击变色

    ----------------------------------按钮点击变色(源代码下有属性解释)------------------------------------------------- ...

  2. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  3. (网页)angular中实现li或者某个元素点击变色的两种方法(转)

    转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...

  4. footer点击添加active class

    //footer点击添加active class var indexFooter= document.querySelectorAll('#index_footer li'); for (var i ...

  5. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  6. Android实现按钮点击效果（第一次点击变色，第二次恢复）

    1.首先创建一个按钮 <Button android:id="@+id/click" android:layout_width="fill_parent" ...

  7. vue验证码点击更新

    vue验证码点击更新 不说啥,直接贴代码 html: <img class="captcha" @click="editCaptcha" :src=&qu ...

  8. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  9. vue实现点击图标，图标在2s中完成旋转

    <!-- 点击 vue实现点击图标,图标在2s中完成旋转 1==>如何让它在2s内完成旋转 使用动画 transform: rotate(-180deg); 动画的运动状态 transit ...

随机推荐

  1. mid

    """ Cross Site Request Forgery Middleware. This module provides a middleware that imp ...

  2. react 小技巧

    1.当从redux里异步获取数据时,在render里渲染dom会出现数据还未获取到的情况,这时可以用 usableSchemas.data.vertexes && usableSche ...

  3. mysql添加外键语句

    sql语句格式: · 添加外键约束:alter table 从表 add constraint 外键(形如:FK_从表_主表) foreign key (从表外键字段) references 主表(主 ...

  4. Coin Slider

    题目描述 You are playing a coin puzzle. The rule of this puzzle is as follows: There are N coins on a ta ...

  5. 在Mac OS终端的Terminal 中使用Sublime Text3

    查看环境变量: $ echo $PATH $ /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin 创建软链接: $ sudo ln -s /Application ...

  6. Qt 【QTableView + DIY delegate】

    通过继承QStyledItemDelegate类去实现自定义委托,达到这样的效果,因为本身Qlistview是单列多行有些信号处理的不好,所以使用QTableview多行多列去实现: 图片路径设置在r ...

  7. Java Number&Math类

    Java Number类 一般地,当需要使用数字的时候,我们通常使用内置数据类型,如:byte.int.long.double等. 实例 int i = 5000; float gpa = 13.65 ...

  8. RAM SSO功能重磅发布 —— 满足客户使用企业本地账号登录阿里云

    阿里云RAM (Resource Access Management)为客户提供身份与访问控制管理服务.使用RAM,可以轻松创建并管理您的用户(比如雇员.企业开发的应用程序),并控制用户对云资源的访问 ...

  9. 在delphi中执行javascript代码

    有时做项目难免用到代码交叉调用,delphi中执行js就是一种,两种方法可用: 一.使用webbrower,比较麻烦 二.使用ScriptControl,简单方便: 1.首先 uses ComObj; ...

  10. delphi 内存映射

    使用内存映射文件读写大文件 使用内存映射文件读写大文件 文件操作是应用程序最为基本的功能之一,Win32 API和MFC均提供有支持文件处理的函数和类.一般来说,这些函数可以满足大多数场合的要求,但是 ...