比如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. Relation-Shape Convolutional Neural Network for Point Cloud Analysis(CVPR 2019)

    代码:https://github.com/Yochengliu/Relation-Shape-CNN 文章:https://arxiv.org/abs/1904.07601 作者直播:https:/ ...

  2. 结合开源软件kaptcha讲解登录验证码功能的实现

    一.验证码生成之配置使用kaptcha 使用google开源的验证码实现类库kaptcha,通过maven坐标引入 <dependency> <groupId>com.gith ...

  3. webpackd学习的意义

    高速发展的前端技术,与浏览器支持的不相匹配.导致前端必须把前端比较先进的技术进行一层编码从而使得浏览器可以加载. 比如前端框架Vue,Angular,React.Less,Sass.TypeScrip ...

  4. day02_Requests模块

    1.anaconda的安装 1.1 .安装可执行程序 1.2 .配置环境变量 ​ 根据环境变量的先后顺序去查找可执行程序文件,如果查找到就执行,如果查找不到就报错. ​ anaconda主要配置: ​ ...

  5. DPT-RP1 解锁过程整理

    前言 首先,感谢大神HappyZ ,没有他的教程,没有下文了. 其次,要感谢的是润物 ,没有她的教程, 可能要研究好久才能弄明白大神给的工具怎么用. 本人没接触过python,以为在命令行执行Pyth ...

  6. oracle 触发器（自增写法）

    触发器trigger 触发器我们也可以认为是存储过程,是一种特殊的存储过程. 存储过程:有输入参数和输出参数,定义之后需要调用 触发器:没有输入参数和输出参数,定义之后无需调用,在适当的时候会自动执行 ...

  7. ++a与a++、--a与a--

    ++a 与 a++ public class Demo { public static void main(String[] args) { int a = 1; System.out.println ...

  8. 对python的初步了解

    一,Python简介 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具 ...

  9. Spring之junit测试集成

    简介 Spring提供spring-test-5.2.1.RELEASE.jar 可以整合junit. 优势:可以简化测试代码(不需要手动创建上下文,即手动创建spring容器) 使用spring和j ...

  10. 企业日常巡检shell脚本

    Linux内部查看系统信息 $INTERNET192忽略 [root@ mysql-master ~]# ip a|grep eth0|grep inet|cut -d' ' -f6|cut -d'/ ...