vue动态绑定class选中当前列表变色的方法示例
作者：花生奶糖 发布时间：2024-04-10 13:48:51
标签：vue,动态绑定,class
这个小技巧在工作当中是非常实用而且经常用到的 希望小伙伴儿们能学到。
先看看效果图吧
接下来我们看看怎么实现的吧
在methods中写入一个方法
clickcategory(index){ // 这里我们传入一个当前值
this.categoryIndex = index
}
然后需要在data里面注册一下
data() {
return {
categoryIndex: 0, //点击当前背景变成白色索引
}
},
在css中设置我们当前选中项为active的类名，并给与一个白色的背景颜色
.active {
background: #fff
}
接下来在html中绑定
<li @click="clickCategory(index)" :class="{active:categoryIndex==index}"> <!-- 选中当前动态绑定class -->
</li>
嗯哼 于是乎我们的点击选中当前改变背景色就这样完成了
来源：http://www.cnblogs.com/yang656/p/10139962.html
0
投稿猜你喜欢
- python使用ctypes调用C/C++1. ctpes介绍ctypes is a foreign function library fo
- 实例如下所示：#!/usr/bin/python# -*- coding: UTF-8 -*-import reimport urllib,
今天开发时，使用axios返回的response中data有多个数据：如果是获取cn里的数据的，可以用：response.data.cn但是- 1.预构建网络class Net(nn.Module): def __init__(self): su
- s={ x1，x2，x3.....}；集合有自动去重的功能，而且可以进行交并补运算，而且集合是无序的，每次打印的结果不一样，故不可以用元素下
- 什么是命令行交互当我们使用脚手架去创建一个项目的时候，通常会通过命令行交互来获取一些信息：比如填项目名称；选择项目模板；选择版本；需要安装哪
- web2.0的标志是Ajax的异步通信的发掘，给我们带来像google map,google suggest 这样令人惊叹的东西。而Ajax
- 本文为大家分享了python2.7.14的安装教程，供大家参考，具体内容如下1.下载python2.7.14下载地址根据自己电脑配置进行选择
- C#连接数据库：Connection对象1.Connection对象概述Connection对象是一个连接对象，主要功能是建立与物理数据库的
- 1. 引言本文为介绍流行的数独游戏的系列文章中的第一篇。更具体地说，我们如何构建一个脚本来解决数独难题，本文的重点在于介绍用于构建数独求解器
- 目录1、基础理论1.1 事务1.2 分布式事务2、分布式事务的解决方案2.1 两阶段提交/XA2.2 SAGA2.3 TCC2.4 本地消息
- 本文实例讲述了Go语言接口用法。分享给大家供大家参考。具体分析如下：接口类型是由一组方法定义的集合。接口类型的值可以存放实现这些方法的任何值
- 通常，在完成了一件网页设计后，设计师的无知都会显露无遗而备受指责。他们把创建网页代码的繁重工作都留给了程序员们。这种现象不只出现在网络开发行
- MSSQL SERVER 2005 数学函数 1.求绝对值 ABS() select FWeight-50,ABS(FWeight-50),
- 1.ES6 解构[...arr, ...array]不改原数组值，生成新的数组。 2.遍历添加array.forEac
- Go 单元测试工具测试分为4个层次单元测试：对代码进行测试集成测试：对一个服务的接口测试端到端测试（链路测试）：从一个链路的入口输入测试用例
- 项目内容：用Python写的糗事百科的网络爬虫。使用方法：新建一个Bug.py文件，然后将代码复制到里面后，双击运行。程序功能：在命令提示行
- 本文实例为大家分享了python实现批量格式转换的具体代码，供大家参考，具体内容如下深度学习过程中总是绕不开数据集的制作，有时候实际图片格式
- <html> <head> <meta http-equiv="Content-Type"
- var p="",s="4e00"; for( var i=0;i<255;i++){ p+=
