<!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. mysql WHERE语句 语法

    mysql WHERE语句 语法 作用:如需有条件地从表中选取数据,可将 WHERE 子句添加到 SELECT 语句.珠海大理石平尺 语法:SELECT 列名称 FROM 表名称 WHERE 列 运算 ...

  2. [HG]walk 题解

    前言 学长博客划水,抄题解,差评. 于是我来重新写一篇正常的题解,虽然解法跟标程不一样,但是复杂度是一样的. 题面 题目描述 在比特镇一共有\(n\)个街区,编号依次为\(1\)到\(n\),它们之间 ...

  3. @media兼容iphone4、5、6

    在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5. 那么-webkit-min-device-pixe ...

  4. EF 查询时，返回其中一张表（省掉一个个写字段的麻烦）

    1.使用partial将需要添加的字段进行扩展 public partial class T_OrderInfo { public string EntName { get; set; } } 2.使 ...

  5. hihocoder1286 : 子矩阵求和

    http://hihocoder.com/problemset/problem/1286 题解 NB分析题. 首先我们令\(s[i][j]\)表示以\((i,j)\)为左上角的矩形的权值和. 因为\( ...

  6. [洛谷P3938]:斐波那契(fibonacci)（数学）

    题目传送门 题目描述 小$C$养了一些很可爱的兔子.有一天,小$C$突然发现兔子们都是严格按照伟大的数学家斐波那契提出的模型来进行繁衍:一对兔子从出生后第二个月起,每个月刚开始的时候都会产下一对小兔子 ...

  7. 正则表达式小结，数据预处理中常用的shell命令

    数据预处理中,这部分命令非常有用. 不需要编写代码,直接通过shell脚本通常就能修改文件格式.有时候sed和awk联合几乎能实现所有功能. 管道命令 | 重定向命令>,2>,>&g ...

  8. 大数据笔记（三）——Hadoop2.0的安装与配置

    一.Hadoop安装部署的预备条件 准备:1.安装Linux和JDK. 安装JDK 解压:tar -zxvf jdk-8u144-linux-x64.tar.gz -C ~/training/ 设置环 ...

  9. 前端面试题-HTML结构语义化

    一.HTML语义化的背景 HTML结构语义化,是近几年才提出来的,对比之前的 HTML 结构,大多是一堆没有语义的标签.用的最多的就是 DIV+CSS,为了改变这种现状,开发者们和官方提出了 HTML ...

  10. ORACLE 根据sql_id查询绑定变量的传入值

    当前查询: select b.NAME, b.POSITION, b.DATATYPE_STRING, b.VALUE_STRING, b.LAST_CAPTURED from v$sql_bind_ ...