<!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. 【bzoj1176】[Balkan2007]Mokia

    题目描述: 维护一个W*W的矩阵,初始值均为S.每次操作可以增加某格子的权值,或询问某子矩阵的总权值.修改操作数M<=160000,询问数Q<=10000,W<=2000000. 输 ...

  2. hdu_1231（最大连续子序列）

    http://acm.hdu.edu.cn/showproblem.php?pid=1231 最长公共子序列: 方法1:暴力枚举所有区间的连续和,维护最大和 复杂度O(n^3)-->因为求区间和 ...

  3. （20）C++项目练习三--------【运动物体视频检测跟踪系统】

    1.功能点 (1)视频监控显示 (2)移动物体标定跟踪(轨迹显示) (3)实时视频保存(以时间戳形式) (4)移动物体触发视频保存.报警 (5)视频文件分类.回放.搜索 进行中............ ...

  4. （10）python学习笔记一

    学习参考博客:http://blog.csdn.net/a359680405/article/details/42486689  深表感谢 1.单行注释  #    多行注释 "" ...

  5. #1123-JSP隐含对象

    JSP 隐含对象 JSP隐含对象是JSP容器为每个页面提供的Java对象,开发者可以直接使用它们而不用显式声明.JSP隐含对象也被称为预定义变量. JSP所支持的九大隐含对象: 对象,描述 reque ...

  6. Swift equality

    最后更新: 2017-07-23 在程序开发中,我们时常需要来判断两个对象是否相等.在编程思想中,两个对象相等指的是在内存中的地址相同,也就是两个指针指向同一个地址.但是在日常理解中,只要两个对象的内 ...

  7. 个推一键认证SDK重磅推出，打造秒级登录体验，让用户一“键”倾心

    移动互联网时代,用户注意力的持续时间越来越短,他们追求便捷与高效.从账号密码登录.短信验证,到第三方登录甚至人脸识别登录,APP的注册/登录方式在逐步变化,开发者希望在这重要的交互端口提升用户的体验, ...

  8. 【转】结构化日志类库 ---- Serilog库

    源地址:https://www.cnblogs.com/mq0036/p/8479956.html 解决异常: Invalid cast from 'System.String' to 'Serilo ...

  9. Oracle诊断：使用USER_SEGMENTS分配给表的物理空间大小

    假设我的SCHEMA的名字是abc, 需要知道在这个SCHEMA下的数据容量,可以通过下面的方式. 1.登录SCHEMA abc 2.使用USER_SEGMENTS查看SCHEMA abc数据容量 S ...

  10. leetcode-mid-array-5. Longest Palindromic Substring

    mycode   12.51% class Solution(object): def longestPalindrome(self, s): """ :type s: ...