vue中动态添加类名,点击哪个,哪个背景颜色变化

news/2024/7/24 13:30:54 标签: javascript, vue.js, css3, html, html5

今天遇到一个需求就是,就是当点击一个按钮的让按钮的颜色不一样,因为这个是循环出来的,所以说点击的时候点哪个就把哪个的id或者下标(index)传过去就好了。就需要动态添加类名。

html"><a-row>
  <a-col :span="4" v-for="(item,index) in contentSize" :key="index">
    <div class="content" @click="quearyEvear(item.number,item.id,index)" :class='{active:index==dynamic}'>
      {{ item.name }}
    </div>
  </a-col>
</a-row>
data () {
  return {
	dynamic: false
 }
}
 quearyEvear (number, id, index) {
   console.log(index)
   this.dynamic = index
 },
.active {
  color: white;
  background-color: #1890ff;
}

http://www.niftyadmin.cn/n/763880.html

相关文章

python多线程库_详解Python多线程下的list

list 是 Python 常用的几个基本数据类型之一.正常情况下我们会对 list 有增删改查的操作,显然易见不会有任何问题.那么如果我们试着在多线程下操作list 会有问题吗? 多线程下的 list 安全 or 不安全&#xff1f; 不安全&#xff01; 通常我们说的线程安全是指针对某个数据结构…

vue中使用ant-design-vue清空value的问题

是因为再点击重置的时候你的input或者checkedbox没有绑定value值或者v-bind <a-input placeholder"请输入检查项目" change"changeProject" :valueproject></a-input> <a-checkbox change"onChangeBenchmarking" v-model"b…

用python打印1234_python入门教程NO.1 用python打印你的宠物小精灵吧

我们来通过一个有趣的例子开始编写我们的第一个python代码。 本文涉及的python基础语法为&#xff1a;print输出函数&#xff0c;赋值&#xff0c;字符串 print() print()是python的一个内置函数&#xff0c;用于打印输出&#xff0c;是最常见的一个函数之一。 有些朋友可能对于…

vue使用ant design vue(upload)文件上传

使用remove的时候是一个函数&#xff0c;刚开始我用的remove后来用上:remove才可以,因为接收的是一个&#xff08;点击移除文件时的回调&#xff0c;返回值为 false 时不移除。支持返回一个 Promise 对象&#xff0c;Promise 对象 resolve(false) 或 reject 时不移除。&#xf…

为什么使用累积分布函数处理后像素值会均匀分布_等待中的悖论:概率分布简介...

我必须等多长时间才能上车&#xff1f;Photo by Jerry Zhang on Unsplash谁不知道这种感觉&#xff1a;您步行去公交车站&#xff0c;等公共汽车&#xff0c;然后…等。 然后您再等一会。 还有更多。 有人告诉您&#xff0c;巴士平均每10分钟一班。 现在您已经等了10分钟。 公共…

使用ant design vue组件(保持默认参数的存在,传更多自己需要的参数)

先允许我唠叨下&#xff0c;应该很多人都会&#xff0c;那我也记录一下。理解一下。 使用组件有一个参数的时候直接使用$event <a-date-picker :default-value"moment(item.createTime)" change"createTimeChange($event,你需要传的参数)"/>createT…

python遗传算法工具包_Python遗传和进化算法框架(一)Geatpy快速入门

Geatpy是一个高性能实用型的Python遗传算法工具箱&#xff0c;提供一个面向对象的进化算法框架&#xff0c;经过全面改版后&#xff0c;新版Geatpy2目前由华南农业大学、暨南大学、华南理工等本硕博学生联合团队开发及维护。 Geatpy提供了许多已实现的遗传和进化算法相关算子的…

使用vue深度开发数组对象多层嵌套时视图不更新

当我们开发的时候&#xff0c;有一些数据是对象里面嵌套数组&#xff0c;数组里面嵌套对象&#xff0c;数据结构很复杂的时候&#xff0c;而且在你循环出来一个select下拉选择框的时候&#xff0c;不让联动的时候这时候就很难搞了结构大概是这样子的 渲染到页面上是这样子的 …