<!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. Python pdfkit

    序言 住在地下室的人,依然有仰望星空的权利. pdfkit python使用pdfkit中,如果使用pdfkit.fromurl 或者pdfkit.fromstring等,就会出现上述错误.而且如果你 ...

  2. UOJ #228. 基础数据结构练习题 线段树 + 均摊分析 + 神题

    题目链接 一个数被开方 #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",st ...

  3. SpringBoot拦截器和 Servlet3.0自定义Filter、Listener

    官方文档译文 Spring Boot 包括对嵌入式Tomcat,Jetty和Undertow服务器的支持.大多数开发人员使用适当的“Starter”来获取完全配置的实例.默认情况下,嵌入式服务器在 p ...

  4. Ubuntu 16.04下使用docker部署rabbitmq

    (以下docker相关的命令,需要在root用户环境下或通过sudo提升权限来进行操作.) 1.拉取rabbimq镜像到本地 docker pull rabbitmq 2. Docker运行rabbi ...

  5. Leetcode 3. Longest Substring Without Repeating Characters(string 用法 水题)

    3. Longest Substring Without Repeating Characters Medium Given a string, find the length of the long ...

  6. window 连接服务器工具

    Xshell xftp 下载网址 以上两个软件均免费, 只需要邮件激活即可. 其中 xshell 主要用来连接服务器,方便使用命令行.xftp 方便传输文件.

  7. [BZOJ3140][HNOI2013]消毒：二分图匹配

    分析 假如实验皿是二维的,那么这道题便是一个二分图最小点覆盖问题,可以转化为二分图最大匹配问题,使用匈牙利算法解决. 考虑如何扩展到三维,首先我们发现一次操作的代价为\(min(x,y,z)\).不难 ...

  8. 数据库为什么使用B+树而不是B树

    B树和B+树的区别主要有两点: 在B树中,你可以将键和值存放在内部节点和叶子节点,但在B+树中,内部节点都是键,没有值.叶子节点同时存放键和值 B+树的叶子节点有一条链相连,而B+树的叶子节点各自独立 ...

  9. 谷歌 AXURE RP EXTENSION拓展问题

    我们打开某种文件页面是 会提示我们下载 AXURE RP EXTENSION 拓展. 其实我们可以直接用ie浏览器打开即可,不用下载

  10. 005-spring-data-elasticsearch 3.0.0.0使用【三】-spring-data之Spring数据扩展

    续 1.8.Spring数据扩展 这些扩展使Spring Data在各种环境下的使用成为可能.目前大部分的整合都是针对Spring MVC. 1.8.1.Querydsl扩展 Querydsl是一个框 ...