前端 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>

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

祝大家新年快乐!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/15235.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TCP三次握手全方面详解

文章目录 (1) 三次握手各状态CLOSE状态SYN_SENT状态SYN_RECV状态ESTABLISHED状态 (2) 为什么握手时的seqnum是随机值&#xff0c;以及acknum的功能(3) 三次握手中的半连接队列&#xff08;SYN队列&#xff09;和全连接队列&#xff08;ACCEPT队列&#xff09;半连接队列全连接队…

基于Java的远程视频会议系统(源码+系统+论文)

第一章 概述 1.1 本课题的研究背景 随着人们对视频和音频信息的需求愈来愈强烈&#xff0c;追求远距离的视音频的同步交互成为新的时尚。近些年来&#xff0c;依托计算机技术、通信技术和网络条件的发展&#xff0c;集音频、视频、图像、文字、数据为一体的多媒体信息&#xff…

Docker Desktop安装到其他盘

Docker Desktop 默认安装到c盘&#xff0c;占用空间太大了&#xff0c;想给安装到其他盘&#xff0c;网上找了半天的都不对 正确安装命令&#xff1a; start /w "" "Docker Desktop Installer.exe" install --installation-dirF:\docker命令执行成功&am…

手动配置IP

手动配置IP&#xff0c;需要考虑四个配置项&#xff1a; 四个配置项 IP地址、子网掩码、默认网关、DNS服务器 IP地址&#xff1a;格式表现为点分十进制&#xff0c;如192.168.254.1 子网掩码&#xff1a;用于区分网络位和主机位 【子网掩码的二进制表达式一定是连续的&#…

Qt:常用控件

目录 控件概述 控件体系的发展 按钮类控件 QPushButton QRadioButton QCheckBox QToolButton 显示类控件 QLabel QLCDNumber QProgressBar QCalendarWidget 输入类控件 QLineEdit QTextEdit QComboBox QSpinBox QDateEdit & QTimeEdit QDial QSlider …

【漫话机器学习系列】087.常见的神经网络最优化算法(Common Optimizers Of Neural Nets)

常见的神经网络优化算法 1. 引言 在深度学习中&#xff0c;优化算法&#xff08;Optimizers&#xff09;用于更新神经网络的权重&#xff0c;以最小化损失函数&#xff08;Loss Function&#xff09;。一个高效的优化算法可以加速训练过程&#xff0c;并提高模型的性能和稳定…

4G核心网的演变与创新:从传统到虚拟化的跨越

4G核心网 随着移动通信技术的不断发展&#xff0c;4G核心网已经经历了从传统的硬件密集型架构到现代化、虚拟化网络架构的重大转型。这一演变不仅提升了网络的灵活性和可扩展性&#xff0c;也为未来的5G、物联网&#xff08;LOT&#xff09;和边缘计算等技术的发展奠定了基础。…

拉格朗日插值法的matlab实现

一、基本原理 比如有如下这些点 x1x2x3x4y1y2y3y4 那么在拉个朗日原理中可以把过这些点的曲线表示为&#xff1a; 其g(x)y叫做一个插值基函数&#xff08;开关&#xff09;&#xff0c;当xx1时&#xff0c;g1(x)1&#xff0c;而当xx2,x3,x4时&#xff0c;g1(x)都为0&#xf…

使用WebStorm开发Vue3项目

记录一下使用WebStorm开发Vu3项目时的配置 现在WebStorm可以个人免费使用啦&#xff01;?? 基本配置 打包工具&#xff1a;Vite 前端框架&#xff1a;ElementPlus 开发语言&#xff1a;Vue3、TypeScript、Sass 代码检查&#xff1a;ESLint、Prettier IDE&#xff1a;WebSt…

35~37.ppt

目录 35.张秘书-《会计行业中长期人才发展规划》 题目​ 解析 36.颐和园公园&#xff08;25张PPT) 题目​ 解析 37.颐和园公园&#xff08;22张PPT) 题目 解析 35.张秘书-《会计行业中长期人才发展规划》 题目 解析 插入自定义的幻灯片&#xff1a;新建幻灯片→重用…

day44 QT核心机制

头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QLabel> //标签类头文件 #include<QPushButton> //按钮类头文件 #include<QLineEdit> //行编辑器类头文件QT_BEGIN_NAMESPACE namespace Ui { class Widget; } …

kafka服务端之副本

文章目录 概述副本剖析失效副本ISR的伸缩LWLEO与HW的关联LeaderEpoch的介入数据丢失的问题数据不一致问题Leader Epoch数据丢失数据不一致 kafka为何不支持读写分离 日志同步机制可靠性分析 概述 Kafka中采用了多副本的机制&#xff0c;这是大多数分布式系统中惯用的手法&…

[笔记] 汇编杂记(持续更新)

文章目录 前言举例解释函数的序言函数的调用栈数据的传递 总结 前言 举例解释 // Type your code here, or load an example. int square(int num) {return num * num; }int sub(int num1, int num2) {return num1 - num2; }int add(int num1, int num2) {return num1 num2;…

mysql8.0使用MHA实现高可用

一、环境配置 本实验环境共有四个节点&#xff0c; 其角色分配如下&#xff08;实验机器均为centos 7.x &#xff09; 机器名称IP配置服务角色备注manager192.168.8.145manager控制器用于监控管理master192.168.8.143数据库主服务器开启bin-log relay-log 关闭relay_logslave…

<论文>DeepSeek-R1:通过强化学习激励大语言模型的推理能力(深度思考)

一、摘要 本文跟大家来一起阅读DeepSeek团队发表于2025年1月的一篇论文《DeepSeek-R1: Incentivizing Reasoning Capability in LLMs via Reinforcement Learning | Papers With Code》&#xff0c;新鲜的DeepSeek-R1推理模型&#xff0c;作者规模属实庞大。如果你正在使用Deep…

【Android开发AI实战】选择目标跟踪基于opencv实现——运动跟踪

文章目录 【Android 开发 AI 实战】选择目标跟踪基于 opencv 实现 —— 运动跟踪一、引言二、Android 开发与 AI 的融合趋势三、OpenCV 简介四、运动跟踪原理&#xff08;一&#xff09;光流法&#xff08;二&#xff09;卡尔曼滤波&#xff08;三&#xff09;粒子滤波 五、基于…

第1章 特征工程

原文&#xff1a;第1章 特征工程 俗话说&#xff0c;“巧妇难为无米之炊”。在机器学习中&#xff0c;数据和特征便是“米”&#xff0c;模型和算法则是“巧妇”。没有充足的数据、合适的特征&#xff0c;再强大的模型结构也无法得到满意的输出。正如一句业界经典的话所说&…

idea 如何使用deepseek 保姆级教程

1.安装idea插件codegpt 2.注册deepseek并生成apikey deepseek 开发平台&#xff1a; DeepSeek​​​​​​​ 3.在idea进行codegpt配置 打开idea的File->Settings->Tools->CodeGPT->Providers->Custom OpenAI Chat Completions的URL填写 https://api.deepseek…

多光谱成像技术在华为Mate70系列的应用

华为Mate70系列搭载了光谱技术的产物——红枫原色摄像头&#xff0c;这是一款150万像素的多光谱摄像头。 相较于普通摄像头&#xff0c;它具有以下优势&#xff1a; 色彩还原度高&#xff1a;色彩还原准确度提升约 120%&#xff0c;能捕捉更多光谱信息&#xff0c;使拍摄照片色…

10vue3实战-----实现登录的基本功能

10vue3实战-----实现登录的基本功能 1.基本页面的搭建2.账号登录的验证规则配置3.点击登录按钮4.表单的校验5.账号的登录逻辑和登录状态保存6.定义IAccount对象类型 1.基本页面的搭建 大概需要搭建成这样子的页面: 具体的搭建界面就不多讲。各个项目都有自己的登录界面&#…