<!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. codeforces 868C - Qualification Rounds（构造）

    原题链接:http://codeforces.com/problemset/problem/868/C 题意:有k个队伍参加比赛,比赛有n个预选的题目,有些队伍对已经事先知道了一些题目.问能不能选出若 ...

  2. 数位dp进阶（hdu2089，3652）

    之前的文章已经讲过如何求1—r中的特殊数,这篇博客就来讲些进阶操作: 直接看例题(hdu2089): (题目是中文的我就不写大意了) 这题与hdu3555最大的区别就是规定了l,不再以1开始: 解决这 ...

  3. 有关于TreeSet的自我理解

    TreeSet是依靠TreeMap来实现的. TreeSet是一个有序集合,TreeSet中的元素将按照升序排列,缺省是按照自然排序进行排列,意味着TreeSet中的元素要实现Comparable接口 ...

  4. input 的 type 等于 file

    高版本浏览器由安全问题没法获得文件的绝对路径, 因此使用浏览器自制播放器只能使用其他的手段实现. 使用相对路径, 把浏览器与文件放在同一路径下即可使用.通用性受到限制.

  5. CSS札记（一）：CSS选择器

    一.语法规则 选择器{ 属性1:属性值1; 属性2:属性值2; ...... } /*注释*/ 二.如何在html中应用CSS 1. 外部引用css文件 css文件:css/layout.css(cs ...

  6. vim输入操作

    在英文状态下按下 键盘上的 ”I“ 使用下箭标移动光标到最下面一行,然后按下END键,按下ENTER键 输入你的内容 按下ESC键,然后输入冒号,即 (:wq) 输入保存流程结束

  7. （转）CBC模式和ECB模式解读

    一 什么是CBC模式 CBC模式的全称是Cipher Block Chaining模式(密文分组链接模式),之所以叫这个名字,是因为密文分组像链条一样相互连接在一起. 在CBC模式中,首先将明文分组与 ...

  8. 嵌入式Linux之telnet

    telnetd   1.busybox搭建根文件系统时telnet配置Networking Utilities——>[*]telnetd[*]Support standalone telnetd ...

  9. qbzt day5 上午

    动态规划 递推  递归   记忆化搜索 斐波那契数列 1.用其他已经计算好的结果计算自己的结果(递推) 2.用自己的值计算别人的值(考虑对之后的项做出的贡献) cin >> n; f[]= ...

  10. qbzt day3 下午（好难）

    内容提要 有关数据结构的例题 求逆序对数 统计每个数前面有多少比他大的数 开数组表示这个数之前0~9这些数出现了几次 动态将某个点加一,动态求前缀和 用树状数组 如果数太大了怎么办? 离散化 步骤:先 ...