Vue绑定style和class 对象写法
适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。
绑定 class 样式【对象写法】:
.box{width: 100px;height: 100px;
}
.aqua{background-color: aqua;
}
.border{border: 20px solid red;
}
.radius{border-radius: 25px;
}
<div id="APP"><div class="box" :class="classObj">多个class样式</div>
</div>
const vm = new Vue({el: "#APP",data(){return {classObj:{aqua: true,border: false,radius:false}}}
});
注:对象写法中的键名必须是 class 类名,值如果为 true 表示使用,如果为 false 表示不使用。当然我们也可以动态修改它的值,选择是否使用。

对象写法也可以直接写在标签中,例:
.box{width: 100px;height: 100px;
}
.aqua{background-color: aqua;
}
.border{border: 20px solid red;
}
.radius{border-radius: 25px;
}
<div id="APP"><div class="box" :class="{aqua:a, border:b, radius:c}">多个class样式</div>
</div>
注:效果与上边的示例相同,a、b、c 都是变量,控制是否使用某个 class 样式。

绑定 style 样式【对象写法】 :
<div id="APP"><div :style="styleObj">绑定style样式</div>
</div>
const vm = new Vue({el: "#APP",data(){return {styleObj:{width: '100px',height: '100px',backgroundColor: "aqua"}}}
});
注:动态绑定 style 样式时,属性必须使用小驼峰命名法,例如:backgroundColor 。

绑定 style 样式【数组写法】:
<div id="APP"><div :style="styleArr">绑定style样式</div>
</div>
const vm = new Vue({el: "#APP",data(){return {styleArr:[{width: "100px",height: "100px"},{backgroundColor: "aqua",border:"20px solid red"}]}}
});
注:使用数组写法绑定 style 样式时,数组其实是由多个 样式对象 组成的。

数组写法也可以直接写在标签中,与上面示例的效果相同。
<div id="APP"><div :style="[styleObj1,styleObj2]">绑定style样式</div>
</div>
const vm = new Vue({el: "#APP",data(){return {styleObj1:{width: "100px",height: "100px"},styleObj2:{backgroundColor: "aqua",border:"20px solid red"}}}
});

原创作者:吴小糖
创作时间:2023.10.13
相关文章:
Vue绑定style和class 对象写法
适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。 绑定 class 样式【对象写法】: .box{width: 100px;height: 100px; } .aqua{background-color: aqua; } .border{border: 20px solid red; } .radius{bor…...
使用vue-sign插件
Vue-sign是一个基于Vue.js和Canvas的签名组件,可以轻松地在Vue应用程序中实现签名板或手写签名功能。使用它可以使用户在前端网页上直接进行手写签名,实现更好的用户交互和业务需求。 使用Vue-sign可以提供以下好处: 通过Vue.js框架进行开发…...
python究竟可以用来做些什么
这里就不撰述python的一些像什么“高级语言”之类的比较常规的介绍了,还是老样子,说说一些比较常用的东西吧。 python是什么 python,一款可编程的开源软件,很多第三方库、框架也是开源的,比如强大的anaconda、sklear…...
Segment Anything(论文解析)
Segment Anything 摘要1.介绍2 SAM任务SAM模型 摘要 我们介绍了“Segment Anything” (SA) 项目:这是一个新的任务、模型和数据集对于图像分割。使用我们高效的模型进行数据收集,我们构建了迄今为止最大的分割数据集(远远超过其他数据集&…...
@ConditionalOnProperty 用法
文章目录 前言一、使用场景二、使用步骤1.错误示例2.ConditionalOnProperty的解决方案 总结 前言 ConditionalOnProperty 是Spring Boot中的条件注解,它的核心功能是通过属性名以及属性值来实现的,常被用于判断某个属性是否存在,然后决定某个…...
如何选择超声波清洗机、超声波清洗机排行榜
眼镜的日常清洗生活中很多人都会把它给忘记!长时间下来眼镜支架就会变成黄色的,非常的难洗掉,从而又浪费了一个眼镜。一副好的眼镜也不便宜的,把换眼镜的钱省下来入一款超声波清洗机,可以大大的减少金钱的支持…...
大家这么喜欢这件羽绒服的吗?眼光太好啦
简单干净散发着朝气,温暖的气息由内而外 90白鸭绒,高密度充绒量和蓬松度 三防工艺,立领连帽设计 下摆抽绳,帽子上的魔术贴设计 无一不将保暖落实在实处...
pytorch 入门(二)
本文为🔗小白入门Pytorch内部限免文章 🍨 本文为🔗小白入门Pytorch中的学习记录博客🍦 参考文章:【小白入门Pytorch】教案二🍖 原作者:K同学啊 目录 一、神经网络的组成部分1. 神经元2. 神经网络…...
2023年国赛-大数据应用开发(师生同赛)_赛项规程样题解析
2023年国赛-大数据应用开发(师生同赛)_赛项规程样题解析-任务B:离线数据处理_子任务一:数据抽取2023年国赛-大数据应用开发(师生同赛)_赛项规程样题解析-任务B:离线数据处理_子任务二:数据清洗2023年国赛-大数据应用开发(师生同赛…...
MNE系列教程1——MNE的安装与基本绘图
一、MNE包简介 MNE-Python是一个强大的Python库,专门用于脑电图(EEG)和磁共振成像(MRI)数据的分析和可视化。它提供了广泛的工具,使研究人员能够高效地处理神经科学数据。 MNE-Python支持许多数据格式,包括标准的EEG和MEG文件格式,以及不同类型的MRI数据。它可以用于…...
黑马JVM总结(三十六)
(1)CAS-概述 cas是配合volatile使用的技术 ,对共享变量的安全性要使用synachonized加锁,但是CAS不加锁,它是使用where(true)的死循环,里面compareAndSwap尝试把结果赋值给共享变量&…...
【React】01-React的入门
文章目录 1.1 React简介1.1.1 官网1.1.2 介绍描述1.1.3 React的特点1.1.3 React高效的原因 1.2.React的基本使用1.2.2.相关js库1.2.3.创建虚拟DOM的两种方式1.2.4.虚拟DOM与真实DOM 1.3.React JSX1.3.1.效果jsx语法规则:1.3.2.JSX1.3.3.渲染虚拟DOM(元素)1.3.4.JSX练…...
【C语言进阶】自定义类型:结构体,枚举,联合
自定义类型:结构体,枚举,联合 1.结构体1.1结构体类的基础知识1.2结构的声明1.3特殊的声明1.4结构的自引用1.5结构体变量的定义和初始化1.6结构体内存对齐1.7修改默认对齐1.8结构体传参 2.段位2.1什么是段位2.2段位的内存分配2.3位段的跨平台问…...
Sklearn 聚类算法的性能评估
聚类算法的性能评估是什么? 聚类是无监督学习的一种常用技术,用于将相似的数据点分组在一起。然而在实施聚类算法后,一个关键的问题便是如何评估其性能或质量。由于聚类是无监督的,因此评估其性能相对更为复杂。本文将探讨多种用于评估聚类性能的指标,包括肘部法则、轮廓…...
9月最新外贸进出口数据出来了,外贸整体向好
10月13日,海关总署发布数据显示,今年前三季度中国货物贸易出口2.52万亿美元,下降5.7%。 9月当月,中国出口2991.3亿美元,同比下降6.2%。贸易顺差777.1亿美元。 这个数据还是在改善的。特别是,我们看到全球…...
SSL证书有效期越来越短是什么原因?
随着互联网的普及和数据安全意识的提高,SSL证书的使用变得日益普遍。SSL证书是一种用于加密数据传输并验证网站身份的安全协议。它们通过加密在用户浏览器和网站服务器之间传输的数据,从而确保数据的隐私和完整性。此外,SSL证书还通过数字签名…...
【前段基础入门之】=>CSS3新特性 3D 变换
导语 在上一章节中,我们分享了2D 变换的效果,也分享了一些案例,同时,既然有2D 变换,那么也就肯定有 3D 变换 那么本章节,就为大家带来有关3D 变换的分享. 文章目录 开启3D空间设置景深透视点位置3D 位移3D …...
form表单的三种封装方法(Vue+ElementUI)
form表单的三种封装方法(VueElementUI) 1.首先是最普通,也是大家最先想到的方法,直接封装:2.实现表单动态渲染、可视化配置的方法,动态表单又可以分为两种方法:(注意:注意 v-model 的…...
云原生周刊:CNCF 宣布 Cilium 毕业 | 2023.10.16
开源项目推荐 Reloader Reloader 是一个 Kubernetes 控制器,用于监控 ConfigMap 和 Secrets 中的变化,并对 Pod 及其相关部署、StatefulSet、DaemonSet 和 DeploymentConfig 进行滚动升级! Spegel Spegel 在瑞典语中意为镜像,…...
岩土工程监测利器:多通道振弦数据记录仪应用隧道监测
岩土工程监测利器:多通道振弦数据记录仪应用隧道监测 岩土工程监测在现代工程建设中的作用越来越重要。为了确保工程质量和工程安全,需要对工程过程中的各种参数进行实时监测和记录。而多通道振弦数据记录仪则是一种重要的监测工具,特别适用…...
从零到部署:手把手教你用Django+OpenCV搭建一个能识别交通标志的“智能眼”(附完整源码)
实战指南:用DjangoOpenCV构建高精度交通标志识别系统 1. 环境配置与项目初始化 在开始构建交通标志识别系统前,需要准备完善的开发环境。以下是经过验证的配置方案: 核心工具栈选择: Python 3.9(推荐3.10.6版本&#x…...
告别玄学调参:在ADS里用Yield Analysis给你的射频滤波器设计上个‘保险’
射频滤波器设计的工程化验证:用ADS Yield Analysis实现稳健性设计 在Wi-Fi 6E和5G毫米波频段快速普及的今天,射频前端模块的性能直接决定了通信质量的上限。作为信号链路上的"守门人",滤波器设计不仅要满足理想仿真环境下的指标要求…...
PyTorch张量操作实战:从基础运算到高效数据处理
1. PyTorch张量基础:从零开始理解多维数组 第一次接触PyTorch张量时,我完全被这个看似复杂的概念搞懵了。直到有一天,我把张量想象成俄罗斯套娃,突然就豁然开朗了。最外层的套娃是最高维度,每打开一层就降一个维度&…...
5大核心功能解析:MAA_Punish如何实现《战双帕弥什》全自动游戏体验
5大核心功能解析:MAA_Punish如何实现《战双帕弥什》全自动游戏体验 【免费下载链接】MAA_Punish 战双帕弥什每日任务自动化 | Assistant For Punishing Gray Raven 项目地址: https://gitcode.com/gh_mirrors/ma/MAA_Punish MAA_Punish是一款专为《战双帕弥什…...
奇偶判断算法的极端实现与优化
1. 奇偶判断算法的极端实现:从40亿条if语句到机器码优化1.1 项目背景与设计动机在计算机科学领域,判断数字奇偶性通常采用取模运算这一经典方法。然而,一个看似荒谬的想法引发了技术人员的深入思考:是否可以通过穷举所有可能的数字…...
嵌入式按键事件处理框架:高可靠消抖与复合操作状态机
1. Button库深度解析:面向嵌入式系统的高可靠性按键事件处理框架1.1 设计定位与工程价值Button库并非简单的GPIO电平读取封装,而是一个面向工业级嵌入式应用的状态感知型按键事件引擎。其核心设计目标是解决传统按键处理中长期存在的三大工程痛点&#x…...
【同态加密实战】从Paillier到BFV:算法原理与编码艺术深度解析
1. 同态加密:数据隐私保护的魔法钥匙 想象一下,你有一把能锁住数据的魔法钥匙——即使数据被锁在箱子里,别人依然可以对箱子里的数据进行计算,而无需打开箱子看到原始内容。这就是同态加密的神奇之处。作为密码学领域的"圣杯…...
零基础玩转OpenClaw:ollama GLM-4-7-Flash镜像入门十步曲
零基础玩转OpenClaw:ollama GLM-4-7-Flash镜像入门十步曲 1. 为什么选择OpenClawGLM-4-7-Flash组合 去年我在整理个人知识库时,每天要花2小时重复处理Markdown文档和截图。直到发现OpenClaw这个能像真人一样操作电脑的开源智能体,配合ollam…...
Iono系列工业PLC模块:Arduino生态的工业级演进
1. Iono Uno/MKR/RP 系统概述Iono 系列(Iono Uno、Iono MKR、Iono RP)并非传统意义的开发板,而是一套面向工业现场的可编程逻辑控制器(PLC)级输入/输出模块。其核心设计哲学是将 Arduino 生态的易用性、丰富库资源与工…...
解锁Stable Diffusion隐藏玩法:用ChatGPT批量生成动漫角色Prompt全攻略
从零到大师:ChatGPT与Stable Diffusion打造专属动漫角色的终极指南 在数字艺术创作领域,AI绘画工具正掀起一场前所未有的革命。想象一下,你脑海中那个独特的动漫角色形象,不再需要数月的美术训练就能实现——只需要正确的工具组合…...
