比如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. Java thinking，What is the result？

    interface O { public Integer oc(Integer i); } abstract class A { Integer i; public A(){ this.i = 0; ...

  2. day 32 操作系统、线程和进程（GIL锁）

    一.操作系统/应用程序 a. 硬件 - 硬盘 - CPU - 主板 - 显卡 - 内存 - 电源 ... b. 装系统(软件) - 系统就是一个由程序员写出来软件,该软件用于控制计算机的硬件,让他们之 ...

  3. Crontab爬虫定时执行

  4. word2vec:主要概念和流程

    1.单词的向量化表示 一般来讲,词向量主要有两种形式,分别是稀疏向量和密集向量. 所谓稀疏向量,又称为one-hot representation,就是用一个很长的向量来表示一个词,向量的长度为词典的 ...

  5. SpringBoot实现登录

    1.使用Spring Initializer快速创建Spring Boot项目 1.1 IDEA:使用 Spring Initializer快速创建项目 IDE都支持使用Spring的项目创建向导快速 ...

  6. linux+docker+nginx如何配置环境并配置域名访问

    一.环境准备 1)下载php环境包,下载地址为:https://www.php.net/downloads.php 2)安装docker,这个主要的作用就是用来安装mysql.你也可以不需要安装这个东 ...

  7. FileReader.result

    FileReader.result 该属性返回文件的内容.此属性仅在读取操作完成后才有效,并且数据的格式取决于用于启动读取操作的方法.FileReader]**result** 句法 var file ...

  8. Docker虚拟化之<基础理论>

    1.虚拟化技术的概念 (1)虚拟化技术主要是将物理的资源转变为逻辑上可以管理的资源,以打破物理结构上的壁垒,让计算元件运行在虚拟的基础上,而不是真实的物理资源上.(2)虚拟化技术的底层是要进行虚拟化的 ...

  9. css5-盒子模型

    HTML<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet& ...

  10. Java分割面板和选项卡面板的应用

    1.分割面板 JSplitPane类的常用构造方法 构造方法 说明 JSplitPane() 创建一个默认的分割面板.默认情况下为在水平方向上分割,重绘方式为只在调整分隔条位置完成时重绘 JSplit ...