当前位置: 首页 > news >正文

Vue 在for循环中动态添加类名及style样式集合

介绍

vuefor 循环中,经常会使用到动态添加类名或者样式的情况,实现给当前的选中的 div 添加不同的样式。

动态添加类名

提示: 所有动态添加的类名,放在表达式里都需要添加引号,进行包裹。

  • 通过 对象 的形式,使用花括号进行包裹。
    使用方法:{'类名': boolean}
    第一个参数是需要添加的类名,第二个参数是一个 boolean值。
    优点是: 可以通过逗号进行分割,即可添加多个类名
    代码如下:
<template><div class="index"><div v-for="(item,index) in state.list" :key="index" class="list-box"><!-- 通过list数组里isActive属性,给p元素添加active类名;--><p :class="{'active': item.isActive">{{ item.title }}</p><!-- 给p元素添加active类名;通过list数组里isRed属性,给p元素添加red类名;(这里添加了两个类名,通过逗号进行分隔的)--><p :class="{'active': item.isActive, 'red': item.isRed}">{{ item.title }}</p></div><div></div></div>
</template>
<script setup>
import {reactive} from 'vue';
const state = reactive({list: [{id: 0,title: '星期一',isActive: true,isRed: false,},{id: 1,title: '星期二',isActive: false,isRed: true,}]
})
</script>
<style lang="less" scoped>.list-box {padding: 0 20px;p {margin-top: 20px;}.active {font-size: 20px;}.red {color: red;}}
</style>

实现效果如下:
在这里插入图片描述

  • 通过 数组 的形式,使用 []进行包裹。
    使用方法:
    使用方法:[判断成立的情况 ? '类名1' : '类名2']
    第一个参数是判断条件成立的表达式,第二个参数是表达式成立的情况下添加的类名,第三个表达式是情况不成立的情况下的类名。
    代码如下:
<template><div class="index"><div v-for="(item,index) in state.list" :key="index" class="list-box"><!-- 通过list数组里isRed属性,为true时给p元素添加red类名的样式,否则不添加;(这里添加了两个类名,通过逗号进行分隔的)--><p :class="[item.isRed ? 'red' : '']">{{ item.title }}</p><!-- 三元同时添加多个类名,使用空格进行隔开就行 如下所示 --><p :class="[item.isRed ? 'red blue' : '']">{{ item.title }}</p></div><div></div></div>
</template>
<script setup>
import {reactive} from 'vue';
const state = reactive({list: [{id: 0,title: '星期一',isRed: false,},{id: 1,title: '星期二',isRed: true,}]
})
</script>
<style lang="less" scoped>.list-box {padding: 0 20px;p {margin-top: 20px;}.red {color: red;}}
</style>

实现效果如下:
在这里插入图片描述

  • 通过 方法 的形式,在方法当中返回想要的类名。
    使用方法:methods(),直接写方法名。
    提示:逻辑多的时候建议用方法来添加类名,只有一个判断的时候建议用三元。
    代码如下:
<template><div class="index"><div v-for="(item,index) in state.list" :key="index" class="list-box"><!-- 直接返回方法名,例如这里我的方法是 isred --><p :class="isRed(item)">{{ item.title }}</p></div><div></div></div>
</template>
<script setup>
import {reactive} from 'vue';
const state = reactive({list: [{id: 0,title: '星期一',isRed: false,},{id: 1,title: '星期二',isRed: true,}]
})
// 在方法里写自己的判断,然后返回对应的类名;
const isRed = (item) => {return item.isRed ? 'red' : ''
}
</script>
<style lang="less" scoped>.list-box {padding: 0 20px;p {margin-top: 20px;}.red {color: red;}}
</style>

实现效果如下:
在这里插入图片描述

动态添加style样式

提示: 在vue中,动态添加 style 样式

  • 所有的样式名必须是 驼峰写法;比如 font-size必须写成 fontSize;
  • 除了绑定的值以外,属性都得用引号括起来,比如 fontSize: '12px'
  1. 通过对象 的形式,
    代码如下:
<template><div class="index"><!-- 页面直接添加样式 --><div :style="{fontSize: '20px', color: 'red'}">哈哈哈</div><!-- vue 动态添加样式,通过数据的双向绑定 --><div :style="{fontSize: state.activeSize  + 'px', color: state.activeColor}">嘿嘿嘿</div></div>
</template>
<script setup>
import {reactive} from 'vue';
const state = reactive({activeSize: 14,activeColor: 'blue'
})
</script>

效果如下:
在这里插入图片描述

  1. 通过数组 的形式,
    代码如下:
<template><div class="index"><div :style="[state.sizeStyle,state.colorStyle]">哈哈哈</div></div></div>
</template>
<script setup>
import {reactive} from 'vue';
const state = reactive({sizeStyle: {fontSize: '18px',height: '40px',lineHeight: '40px',width: '80px',textAlign: 'center'},colorStyle: {color: 'red',border: '1px solid green'}
})
</script>

效果如下:
在这里插入图片描述

  1. 通过 三元判断的形式,进行添加
    代码如下:
<template><div class="index"><div :style="state.active ? 'color: red': ''">哈哈哈</div></div>
</template>
<script setup>
import {reactive} from 'vue';
const state = reactive({active: true,
})
</script>
<style>
.active {color: red;
}
</style>

效果如下所示:
在这里插入图片描述
4. 通过 方法的形式,进行返回。
代码如下:

<template><div class="index"><div :style="setStyle()">哈哈哈</div></div>
</template>
<script setup>
const setStyle = () => {return 'background: red; height: 40px;line-height: 40px; width: 70px;color: #fff; text-align: center;'
}
</script>

效果如下:
在这里插入图片描述

总结

这里我用的是 vue3的一些写法,在vue2里,用法一样,在data里定义数据即可。

相关文章:

Vue 在for循环中动态添加类名及style样式集合

介绍 在vue的 for 循环中&#xff0c;经常会使用到动态添加类名或者样式的情况&#xff0c;实现给当前的选中的 div 添加不同的样式。 动态添加类名 提示&#xff1a; 所有动态添加的类名&#xff0c;放在表达式里都需要添加引号&#xff0c;进行包裹。 通过 对象 的形式&a…...

Maven的优势

作用一&#xff1a;个人理解maven主要是用来解决导入java类依赖的jar,编译java项目主要问题。(最早手动导入jar&#xff0c;使用Ant之类的编译java项目)以pom.xml文件中dependency属性管理依赖的jar包&#xff0c;而jar包包含class文件和一些必要的资源文件。当然它可以构建项目…...

uboot,内核,根文件系统的作用

复习了下uboot&#xff0c;内核&#xff0c;根文件系统&#xff0c;简单概括下三者的主要内容。 1 uboot uboot的目的&#xff1a;启动内核。 uboot的功能可以分为两个阶段任务。 1.2.1 uboot第一阶段 uboot第一阶段主要负责硬件相关的初始化&#xff0c;主要在cpu/arm920…...

Vue3通透教程【四】Vue3组合API初体验

文章目录&#x1f31f; 写在前面&#x1f31f; 组合式 API 是什么&#xff1f;&#x1f31f; 直观组合式API&#x1f31f; 写在最后&#x1f31f; 写在前面 专栏介绍&#xff1a; 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章&#xff0c;应粉丝要求开始更新 Vue3 的相关技…...

coco数据集训练nanodet详细流程

github地址 首先要配置环境 conda create -n nanodet python3.8 -y conda activate nanodet确认一下cuda版本 nvcc -V确认是11.3之后&#xff0c;要安装11.3对应的pytorch版本。 本机装pytorch1.12.1后面运行的时候会报错&#xff08;torch没有经过cuda编译&#xff09;&…...

关于Kubernetes不兼容Docker

本博客地址&#xff1a;https://security.blog.csdn.net/article/details/129153459 参考文献&#xff1a;https://www.cnblogs.com/1234roro/p/16892031.html 一、总结 总结起来就是一句话&#xff1a; k8s只是弃用了dockershim&#xff0c;并不是弃用了整个Docker&#xf…...

MySql_基础篇_从下载mysq到数据库操作

本笔记基于b站up主黑马程序员的视频整理 用于记录与回顾 数据库相关概念 数据库 DS 存储数据的仓库 数据库管理系统 DSMS 操纵和管理数据库的大型软件 sql 操作关系型数据库的编程语言是一套标准 mysql 默认端口号是3306 下载数据库 社区版下载 https://dev.mysql.com/…...

当我尝试问了chatGPT几个问题之后,我感到了危机......

问题1 &#xff1a; vue3 框架的bug有哪些&#xff1f; 组件内部的状态更新不及时&#xff1a;由于Vue3使用Proxy来实现响应式&#xff0c;在某些情况下&#xff0c;组件内部的状态更新不及时&#xff0c;导致组件的渲染出现问题。 组件内部的数据更新不及时&#xff1a;由于V…...

如何生成全局唯一ID

1.数据库自增ID 2.UUID 3.Redis生成ID 4.zookeeper生成ID 5.雪花算法...

基于node vue的电商系统 mongodb express框架

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 基于node vue的电商系统 mongodb express框架前言技术栈基本功能普通用户管理员一、运行截图&#xff1f;二、使用步骤1.前端main.js2.后端admin路由前言 技术栈 本项目采用…...

【03-JVM面试专题-JVM中你知道的类加载器有哪些?作用是什么?分别用来加载什么文件?什么内容的呢?】

JVM中你知道的类加载器有哪些&#xff1f;作用是什么&#xff1f;分别用来加载什么文件&#xff1f;什么内容的呢&#xff1f; JVM的类加载器你都知道吗&#xff1f;它们的作用是什么呢&#xff1f;分别用来加载什么文件呢&#xff1f;你看看自己掌握的怎么样呢&#xff1f; Bo…...

面试纪要FFFFF

面试纪要目录概述需求&#xff1a;设计思路实现思路分析1.主要内容参考资料和推荐阅读Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wait for change,challenge Survive. hap…...

gma 1.1.3 (2023.02.22) 更新日志

&#xff08;实际版本日期&#xff1a;2023.02.14&#xff09; 重要更新&#xff1a; 从本版本开始&#xff0c; gma 开始支持 Python 3.11&#xff01; 新增&#xff1a; 1、map 增加【AddDataSetDiscrete】添加离散型栅格数据集绘制功能。 2、math a、添加 Stretch 数据…...

现有安全技术

现有的安全技术 防火墙技术 数据机密性技术 防火墙技术比较静态地保护网络支付涉及的客户端网络商家网络、金融专用网络等网络级的安全&#xff0c;数据传输过程中的安全性则需要数据机密性技术进一步给以保护 我们将源信息称为明文。为了保护明文&#xff0c;将其通过某种…...

Qt QMAKE_MSC_VER

文章目录摘要修改conf文件参考链接关键字&#xff1a; Qt、 QMAKE_MSC_VER 、 conf、 version、 关键字5摘要 今天在又有了新的小项目需要CV一下&#xff0c;但是第三方提供的是COM组件的库&#xff0c;所以第一步还是老实使用VS版本的Qt 来开发&#xff0c;以防不测&#xf…...

如何通俗地理解原码、反码和补码

进制是什么&#xff1f;进制是人为设计的一套带进制计数方法&#xff0c;比如日常使用的十进制&#xff0c;就是0-9这10个数字&#xff0c;每逢十就会向高位进一。因为人类只有十根手指&#xff0c;所以天生地就会想到使用十进制--数到10发现手指头不够用了&#xff0c;就只能进…...

在vite vue3 前端架构中,切换环境,切换项目的架构设计方案

最近在项目中遇到了这样一个问题&#xff0c;在我们的系统中&#xff0c;有一个项目的概念&#xff0c;用户可以创建多个项目&#xff0c;每个项目中又有多个环境&#xff0c; 当用户点击项目名称后&#xff0c;会进入一个项目的内页&#xff0c;左侧菜单栏会有切换环境的功能。…...

华为OD机试真题Python实现【跳格子】真题+解题思路+代码(20222023)

跳格子 题目 地上共有N个格子,你需要跳完地上所有的格子, 但是格子间是有强依赖关系的,跳完前一个格子后, 后续的格子才会被开启,格子间的依赖关系由多组steps数组给出, steps[0]表示前一个格子,steps[1]表示steps[0]可以开启的格子: 比如[0,1]表示从跳完第0个格子以后…...

Python 入门之文件和异常处理

文件和异常 至此&#xff0c;已经掌握了编写组织有序而易于使用的程序所需的基本技能&#xff0c;该考虑让程序目标更明确、用途更大了。 本章&#xff0c;将学习文件处理&#xff0c;它能让程序快速分析大量的数据&#xff0c;也将学习错误处理&#xff0c;避免程序在面对意…...

操作系统作业

1、下列关于线程的描述中&#xff0c;错误的是A&#xff0e;内核级线程的调度由操作系统完成B&#xff0e;操作系统为每个用户级线程建立一个线程控制块C&#xff0e;用户级线程间的切换比内核级线程间的切换效率高D&#xff0e;用户级线程可以在不支持内核级线程的操作系统上实…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...