比如ul下有4个li元素。

给每个li绑定点击事件@click="select_li(index)，然后这个点击时间会将一个全局变量 selectLi 赋值为 index 的值。

然后在每个li上加上class样式

:class="[selectLi ==index?'active':'']"

即可。

简单实现vue列表点击某个高亮显示的更多相关文章

  1. Vue 菜单栏点击实现高亮显示

    步骤: 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index) 添加点击事件toggle(),传入下标参数:@click="fn1();fn2()" 动态切换 ...

  2. Vue列表过渡

    前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...

  3. jQuery+php+Ajax文章列表点击加载更多功能

    jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...

  4. 一个简单的 vue.js 实践教程

    https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...

  5. python--selenium简单模拟百度搜索点击器

    python--selenium简单模拟百度搜索点击器 发布时间:2018-02-28 来源:网络 上传者:用户 关键字: selenium 模拟 简单 点击 搜索 百度 发表文章摘要:用途:简单模拟 ...

  6. cesium加载gltf模型点击以及列表点击定位弹窗

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 之 ...

  7. 微信小程序循环列表点击每一个单独添加动画

    首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微 ...

  8. Vue列表渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...

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

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

随机推荐

  1. 【原创】（十二）Linux内存管理之vmap与vmalloc

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  2. Python和Java的区别

    这里是我的一些总结,有些是参考别人的(在这里谢谢!!!) 区别: 1.Python比Java简单,学习成本低,开发效率高2.Java运行效率高于Python,尤其是纯Python开发的程序,效率极低3 ...

  3. FastDFS搭建分布式文件系统

    FastDFS搭建分布式文件系统 1. 什么是分布式文件系统 分布式文件系统(Distributed File System)是指文件系统管理的物理存储资源不一定直接连接在本地节点上,而是通过计算机网 ...

  4. Linux高级命令-sort、uniq、 cut、sed、grep、find、awk

    sort(参考学习网站:http://www.cnblogs.com/dong008259/archive/2011/12/08/2281214.html) 功能:根据不同的数据类型进行排序 格式:s ...

  5. 为什么服务器突然回复RST——小心网络中的安全设备

    RST产生原因 一般情况下导致TCP发送RST报文的原因有如下3种:    1. SYN数据段指定的目的端口处没有接收进程在等待.        2.TCP想放弃一个已经存在的连接.    3.TCP ...

  6. vsftp安装和配置

    2013-10-10 10:49:48|  分类: Linux|举报|字号 订阅     源码下载地址:ftp://vsftpd.beasts.org/users/cevans/untar/   1. ...

  7. 形式语言与自动机|DFA识别句子

    实验二 DFA识别句子 一.实验目的 加深对DFA工作原理的理解. 二.实验内容 1.设计固定DFA.也就是说用if-then-else(一般用来实现字母表中只有两个字母的情况).switch(大于两 ...

  8. 在flink中使用jackson JSONKeyValueDeserializationSchema反序列化Kafka消息报错解决

    在做支付订单宽表的场景,需要关联的表比较多而且支付有可能要延迟很久,这种情况下不太适合使用Flink的表Join,想到的另外一种解决方案是消费多个Topic的数据,再根据订单号进行keyBy,再在逻辑 ...

  9. 时至今日，我们应该承认.Net目前的状况实在堪忧

    一:  .Net之前 .Net 经历了多年的锤炼,语言特性本身非常优雅和完善,也是非常甜品的一种语言 二:  .Net现状 但是与此同时,.Net的生态日益糟糕,困扰着广大.Neter 三:   .N ...

  10. KVM http网络加载镜像报错（mount: wrong fs type, bad option, bad superblock on /dev/loop0）

    curl: (23) Failed writing body (7818 != 16384)loop: module loadeddracut-initqueue[579]: mount: wrong ...