比如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. mysql安装与sqlyog安装

    首先是mysql安装,参考下面两个链接 https://www.cnblogs.com/gengyufei/p/11735358.html#_label4 https://www.jb51.net/a ...

  2. Shell - 长 ping 脚本监控网络时延

    生产环境中, 网络时延是一个很重要的指标. 为了方便检查网络时延的大小, 我们可以通过ping命令实现长时间的网络监控. 1 ping 命令的使用 1.1 常用参数 -i: 每次执行ping操作的间隔 ...

  3. 洛谷P2670-扫雷游戏

    文章目录 原题链接 题面简述 输入格式 输出格式 思路 代码 原题链接 题面简述 在n行m列的雷区中有一些格子含有地雷(称之为地雷格),其他格子不含地雷(称之为非地雷格).玩家翻开一个非地雷格时,该格 ...

  4. day20191012笔记

    课程默写笔记: 1.程序架构 C/S 客户端/服务器端 B/S 浏览器/服务器端 2.Tomcat应用服务器 tomcat默认端口号是80:tomcat配置文件中通常端口的定义是8080: 3.使用开 ...

  5. java内存区域，jvm内存各个区域详解

    一.运行时数据区域 1.如图所示,可分为如下几个区域. 2.程序计数器 程序计数器是一块较小的内存空间,它的作用可以看做是当前线程所执行的字节码的行号指示器.字节码解释器工作时就是通过改变这个计数器的 ...

  6. C语言l博客作业05

    问题 回答 这个作业属于哪个课程 C语言程序设计ll 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/SE2019-2/homework/9830 我在这 ...

  7. C语言I—2019秋作业03

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 C语言I-2019秋作业03 我在这个课程的目标是 掌握if-else语句,运算关系 这个作业在那个具体方面帮助我实现目标 row 2 c ...

  8. 重新调用 layoutSubview

    重新调用 layoutSubview

  9. 高性能Web动画和渲染原理系列（1）——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  10. jquery.validate的一个bug

    在用jquery.validate.js做输入验证中,用到了对某个字段重复性的判断,就是在某字段的验证中使用remote进行输入时用ajax不断向后台发送请求,但是奇怪的是,在你在data:{}中用n ...