<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style>

             .active{

                 color: red;

             }

         </style>

     </head>

     <body>

         <ul id="change">

             <li v-for="(m,index) in content" @click="doActive(index)" :class="{active:index==current}">{{m}}</li>

         </ul>

         <script src="../js/vue.js"></script>

         <script>

             let eg = new Vue({

                 el:"#change",

                 data:{

                     current:0,

                     content:['aaa','bbb','ccc','ddd','eee']

                 },

                 methods:{

                     doActive:function(index){

                         this.current = index;

                     }

                 }

             })

         </script>

     </body>

 </html>

每次点击时将当前被点击的li的索引串到doActive中

current 用于保存该索引

v-bind的对象语法  当index==current的时候会为当前li增加active的class

Vue实现点击li变色的更多相关文章

  1. 鼠标移到导航上面 当前的LI变色 处于当前的位置

    鼠标移到导航上面 当前的LI变色 处于当前的位置,广泛应用于当前导航. 点击这里查看效果 以下是源代码: <html> <head> <meta http-equiv=& ...

  2. 点击li，点击的li添加class，其余去掉class

    点击li,点击的li添加class,其余去掉class <script type="text/javascript"> $(function () { var liob ...

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

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

  4. jquery如何实现点击LI标签和下面的LI互换顺序？ 超简单代码

    转: jquery如何实现点击LI标签和下面的LI互换顺序? 上面的效果涉及jquery的两个方法: next()  :  获得匹配元素集合中每个元素紧邻的下一个同胞元素. after() :在被选元 ...

  5. jquery点击li 获取当前父节点所在类的索引

    jquery点击li 获取当前父节点所在类的索引 $('.jbcz').find('.content li').click(function(){ //alert($('.jbcz').find('. ...

  6. 获取点击li的当前索引

    获取点击li的当前索引 点击特定次序的li  展现特定的页面 $('.wgsb').find('.wangge_data_list li').click(function(){ var index=$ ...

  7. vue验证码点击更新

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

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

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

  9. vue 的点击事件怎么获取当前点击的元素

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元   首先 vue的点击事件 是用 @cl ...

随机推荐

  1. 使用Docker安装PaddlePaddle安装过程中出现的几个问题

    Unable to create: 已停止该运行的命令,因为首选项变量"ErrorActionPreference"或通用参数设置为 Stop: 无法新建虚拟机. "Mo ...

  2. sh_04_qq号码

    sh_04_qq号码 # 1. 定义一个变量记录 QQ 号码 qq_number = " # 2. 定义一个变量记录 QQ 密码 qq_password = " # 注意:在使用解 ...

  3. Count on a tree(树上路径第K小)

    题目链接:https://www.spoj.com/problems/COT/en/ 题意:求树上A,B两点路径上第K小的数 思路:主席树实际上是维护的一个前缀和,而前缀和不一定要出现在一个线性表上. ...

  4. HDU 5073 Galaxy （数学）

    Galaxy Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total Su ...

  5. 用Vue来实现音乐播放器（九）：歌单数据接口分析

    z这里如果我们和之前获取轮播图的数据一样来获取表单的数据  发现根本获取不到 原因是qq音乐在请求头里面加了authority和refer等 但是如果我们通过jsonp实现跨域来请求数据的话  是根本 ...

  6. python异常处理（try-except）

    什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行. 一般情况下,在Python无法正常处理程序时就会发生一个异常. 异常是Python对象,表示一个错误. 当Pyth ...

  7. python-笔记（一）python简介和入门

    一.什么是python? python是一种面向对象.解释型的计算机语言,它的特点是语法简洁.优雅.简单易学.在1989诞生,Guido(龟叔)开发.这里的python并不是蟒蛇的意思,而是龟叔非常喜 ...

  8. Jmeter上传文件、cookie、登录验证

    2.11选择http请求   3.0 cookie 域:十九服务器ip或者域名 路径就是接口路径 登录验证:

  9. Delphi XE2 之 FireMonkey 入门(13) - 动画(下)

    TAnimation 类的主要成员: protected   function NormalizedTime: Single;      //   procedure ProcessAnimation ...

  10. rtti读取和设置属性

    http://www.cnblogs.com/hnxxcxg/archive/2013/03/02/2940565.html rtti读取和设置属性   编辑器通过 Rtti 还能够调用一个类的方法, ...