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

前端 CSS 动态设置样式::class、:style 等技巧详解

一、:class 动态绑定类名

v-bind:class(缩写为 :class)可以动态地绑定一个或多个 CSS 类名。

1. 对象语法

通过对象语法,可以根据条件动态切换类名。

<template><div :class="{ greenText: isActive, 'red-text': hasError }">海绵宝宝不喜欢侬,喜欢章鱼哥。</div>
</template><script>
export default {data() {return {isActive: true,hasError: false,};},
};
</script><style>
.greenText {color: green;
}
.red-text {color: red;
}
</style>
  • greenText:当 isActive 为 true 时,添加 greenText 类。
  • red-text:当 hasError 为 true 时,添加 red-text 类。

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

2. 数组语法

通过数组语法,可以同时绑定多个类名。

<template><div :class="[textClass, bgcClass]">海绵宝宝不喜欢侬,喜欢章鱼哥。</div>
</template><script>
export default {data() {return {textClass: 'greenText',bgcClass: 'pinkBgc',};},
};
</script><style>
.greenText {color: green;
}
.pinkBgc {width: 300px;height: 200px;background-color: pink;margin: 200px auto;
}
</style>
  • textClass 和 bgcClass 是数据属性,它们的值会同时作为类名绑定到元素上。

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

3. 结合计算属性

当类名的逻辑较为复杂时,可以使用计算属性来动态生成类名对象。

<template><div :class="computedClass">海绵宝宝不喜欢侬,喜欢章鱼哥。</div>
</template><script>
export default {data() {return {isActive: true,hasError: true};},computed: {computedClass() {return {greenText: this.isActive && !this.hasError,'text-red': this.hasError};}}
};
</script><style>
.greenText {color: green;
}
.text-red{color: red;
}
</style>
  • greenText:isActive 为true并且hasError为false的时候生效;
  • text-red:hasError 为true的时候生效;
    效果图:
    在这里插入图片描述

二、:style 动态绑定内联样式

v-bind:style(缩写为 :style)可以动态地绑定内联样式。

1. 对象语法

通过对象语法,可以直接绑定样式对象。

<template><div :style="{ color: activeColor, fontSize: fontSize + 'px' }">海绵宝宝不喜欢侬,喜欢章鱼哥。</div>
</template><script>
export default {data() {return {activeColor: 'red',fontSize: 12};},
};
</script>
  • activeColor 和 fontSize 是数据属性,它们的值会作为样式绑定到元素上。
    效果图:
    在这里插入图片描述
2. 数组语法

通过数组语法,可以同时绑定多个样式对象。

<template><div :style="[styles1, styles2]">海绵宝宝不喜欢侬,喜欢章鱼哥。</div>
</template><script>
export default {data() {return {styles1: {color: 'red',fontSize: '14px'},styles2: {fontWeight: 'bold',textDecoration: 'underline'}};},
};
</script>
  • styles1 和 styles2 的所有样式都会绑定到元素上。
    效果图:
    在这里插入图片描述
3. 使用三元表达式

可以在 :style 中使用三元表达式,根据条件动态设置样式值。

<template><div :style="{ color: isActive ? 'green' : 'red' }">海绵宝宝不喜欢侬,喜欢章鱼哥。</div>
</template><script>
export default {data() {return {isActive: true};},
};
</script>

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

4. 使用模板字符串

可以使用模板字符串动态拼接样式值。

<template><div :style="`color: ${isActive ? 'green' : 'red'}; font-size: ${fontSize}px`" class="demo">海绵宝宝不喜欢侬,喜欢章鱼哥。</div>
</template><script>
export default {data() {return {isActive: false,fontSize: 12};},
};
</script>

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

祝大家新年快乐!

相关文章:

前端 CSS 动态设置样式::class、:style 等技巧详解

一、:class 动态绑定类名 v-bind:class&#xff08;缩写为 :class&#xff09;可以动态地绑定一个或多个 CSS 类名。 1. 对象语法 通过对象语法&#xff0c;可以根据条件动态切换类名。 <template><div :class"{ greenText: isActive, red-text: hasError }&…...

qt widget和qml界面集成到一起

将 Qt Widgets 和 QML 界面集成在一起可以利用 QQuickWidget 或 QQuickView。以下是基本步骤: 使用 QQuickWidget 创建 Qt Widgets 项目: 创建一个基于 Widgets 的应用程序。添加 QQuickWidget: 在你的窗口或布局中添加 QQuickWidget。 例如,可以在 QMainWindow 中使用: …...

BUU30 [网鼎杯 2018]Fakebook1

是一个登录界面&#xff0c;我们先注册一个试试&#xff1a; 用dirsearch扫描出来robots.txt&#xff0c;也发现了flag.php&#xff0c;并下载user.php.bak 源代码内容&#xff1a; <?phpclass UserInfo {public $name "";public $age 0;public $blog &quo…...

信息科技伦理与道德3-2:智能决策

2.2 智能推荐 推荐算法介绍 推荐系统&#xff1a;猜你喜欢 https://blog.csdn.net/search_129_hr/article/details/120468187 推荐系统–矩阵分解 https://blog.csdn.net/search_129_hr/article/details/121598087 案例一&#xff1a;YouTube推荐算法向儿童推荐不适宜视频 …...

《代码随想录第二十八天》——回溯算法理论基础、组合问题、组合总和III、电话号码的字母组合

《代码随想录第二十八天》——回溯算法理论基础、组合问题、组合总和III、电话号码的字母组合 本篇文章的所有内容仅基于C撰写。 1. 基础知识 1.1 概念 回溯是递归的副产品&#xff0c;它也是遍历树的一种方式&#xff0c;其本质是穷举。它并不高效&#xff0c;但是比暴力循…...

PromptSource官方文档翻译

目录 核心概念解析 提示模板&#xff08;Prompt Template&#xff09; P3数据集 安装指南 基础安装&#xff08;仅使用提示&#xff09; 开发环境安装&#xff08;需创建提示&#xff09; API使用详解 基本用法 子数据集处理 批量操作 提示创建流程 Web界面操作 手…...

USB子系统学习(四)用户态下使用libusb读取鼠标数据

文章目录 1、声明2、HID协议2.1、描述符2.2、鼠标数据格式 3、应用程序4、编译应用程序5、测试6、其它 1、声明 本文是在学习韦东山《驱动大全》USB子系统时&#xff0c;为梳理知识点和自己回看而记录&#xff0c;全部内容高度复制粘贴。 韦老师的《驱动大全》&#xff1a;商…...

Ansible简单介绍及用法

一、简介 Ansible是一个简单的自动化运维管理工具&#xff0c;基于Python语言实现&#xff0c;由Paramiko和PyYAML两个关键模块构建&#xff0c;可用于自动化部署应用、配置、编排task(持续交付、无宕机更新等)。主版本大概每2个月发布一次。 Ansible与Saltstack最大的区别是…...

目前推荐的优秀编程学习网站与资源平台,涵盖不同学习方式和受众需求

一、综合教程与互动学习平台 菜鸟教程 特点:适合零基础新手,提供免费编程语言教程(Python、Java、C/C++、前端等),页面简洁且包含大量代码示例,支持快速上手。适用人群:编程入门者、需要快速查阅语法基础的学习者。W3Schools 特点:专注于Web开发技术(HTML、CSS、JavaS…...

软件工程-软件需求规格说明(SRS)

基本介绍 目标 便于用户、分析人员、设计人员进行交流 支持目标软件系统的确认&#xff08;验收&#xff09; 控制系统进化过程&#xff08;追加需求&#xff09;&#xff1a;拥有版本记录表 需要在软件分析完成后&#xff0c;编写完成软件需求说明书。 具体标准可参考GB…...

运维_Mac环境单体服务Docker部署实战手册

Docker部署 本小节&#xff0c;讲解如何将前端 后端项目&#xff0c;使用 Docker 容器&#xff0c;部署到 dev 开发环境下的一台 Mac 电脑上。 1 环境准备 需要安装如下环境&#xff1a; Docker&#xff1a;容器MySQL&#xff1a;数据库Redis&#xff1a;缓存Nginx&#x…...

UE5.5 PCGFrameWork--GPU CustomHLSL

在上一篇UE5.5 PCGFrameWork使用入门-CSDN博客 大致介绍了UE5 PCG框架的基本使用. 本篇探索PCGFrame的高级应用--GPU点云。也就是利用GPU HLSL编程对点云进行操纵&#xff0c;可以大幅度提升点云生成效率。 目前在UE5 PCG框架中&#xff0c;点云GPU的应用大致分为三类: Point…...

RabbitMQ 如何设置限流?

RabbitMQ 的限流&#xff08;流量控制&#xff09;主要依赖于 QoS&#xff08;Quality of Service&#xff09; 机制&#xff0c;即 prefetch count 参数。这个参数控制每个消费者一次最多能获取多少条未确认的消息&#xff0c;从而避免某个消费者被大量消息压垮。 1. RabbitMQ…...

json格式,curl命令,及轻量化处理工具

一. JSON格式 JSON&#xff08;JavaScript Object Notation&#xff09; 是一种轻量级的数据交换格式。它基于一个子集的JavaScript编程语言&#xff0c;使用人类易于阅读的文本格式来存储和表示数据。尽管名字中有“JavaScript”&#xff0c;但JSON是语言无关的&#xff0c;几…...

Postman面试问题

在 API 测试领域&#xff0c;Postman 已成为最流行的工具之一。无论是功能测试、自动化测试&#xff0c;还是接口调试&#xff0c;Postman 都扮演着重要角色。而在软件测试面试中&#xff0c;Postman 相关问题更是高频考点。如果你正在准备面试&#xff0c;赶紧看看这些Postman…...

【JVM详解四】执行引擎

一、概述 Java程序运行时&#xff0c;JVM会加载.class字节码文件&#xff0c;但是字节码并不能直接运行在操作系统之上&#xff0c;而JVM中的执行引擎就是负责将字节码转化为对应平台的机器码让CPU运行的组件。 执行引擎是JVM核心的组成部分之一。可以把JVM架构分成三部分&am…...

esp32 udp 客户端 广播

esp32 udp 客户端 广播 #include "bsp_udpc.h"// #include "com_config.h" // #include "com_xqueue.h"#include "bsp_udpc.h" #define TAG "bsp_udpc"#include <string.h> #include <sys/param.h> #include &q…...

nginx日志存储access日志和error保留180天,每晚把前一天的日志文件压缩成tar.gz

‌logrotate日志分割时&#xff0c;rotate参数是必须要加的‌ 在logrotate的配置文件中&#xff0c;rotate参数用于指定保留的旧日志文件数量。如果不配置rotate参数&#xff0c;默认是0个&#xff0c;也就是只允许存在一份日志&#xff0c;刚切分出来的日志会马上被删除‌ l…...

【Java】多线程和高并发编程(四):阻塞队列(上)基础概念、ArrayBlockingQueue

文章目录 四、阻塞队列1、基础概念1.1 生产者消费者概念1.2 JUC阻塞队列的存取方法 2、ArrayBlockingQueue2.1 ArrayBlockingQueue的基本使用2.2 生产者方法实现原理2.2.1 ArrayBlockingQueue的常见属性2.2.2 add方法实现2.2.3 offer方法实现2.2.4 offer(time,unit)方法2.2.5 p…...

C#控件开发6—旋转按钮

按钮功能&#xff1a;手自动旋转&#xff0c;标签文本显示、点击二次弹框确认&#xff08;源码在最后边&#xff09;&#xff1b; 【制作方法】 找到控件的中心坐标&#xff0c;画背景外环、内圆&#xff1b;再绘制矩形开关&#xff0c;进行角度旋转即可获得&#xff1b; 【关…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...