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

Vue中v-bind对样式控制的增强—(详解v-bind操作class以及操作style属性，附有案例+代码)

news 2026/4/8 12:28:27

文章目录

  • v-bind对样式控制的增强
    • 2.1 操作class
      • 2.1.1 语法
      • 2.1.2 对象语法
      • 2.1.3 数组语法
      • 2.1.4 使用
      • 2.1.5 Test
    • 2.2 操作style
      • 2.2.1 语法
      • 2.2.2 使用
      • 2.2.3 Test

v-bind对样式控制的增强

2.1 操作class

2.1.1 语法

<div> :class = "对象/数组">这是一个div</div>

2.1.2 对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

适用场景：一个类名，来回切换

2.1.3 数组语法

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div><div class="box" :class="[ '类名1', '类名2', '类名3' ]"></div>

使用场景:批量添加或删除类

2.1.4 使用

<style>.box {width: 50px;height: 50px;border: 1px solid #000;margin-top: 5px;}.red {background-color: red;}.big {width: 100px; height: 100px;}</style>
</head>
<body><div id="app"><div class="box" :class="{ big: true, red: true }">你好Java</div><div class="box" :class="['red', 'big']">你好Java</div></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {}})</script>
</body>

2.1.5 Test

<style>* {margin: 0;padding: 0;}ul {display: flex;border-bottom: 2px solid #1e3c9f;padding: 0 10px;}li {width: 100px;height: 50px;line-height: 50px;list-style: none;text-align: center;}li a {display: block;text-decoration: none;font-weight: bold;color: #333333;}li a.active {background-color: #12e06f;color: #fff;}</style>
</head>
<body><div id="app"><ul><li v-for="(item ,index) in list" :key="item.id" @click="activeIndex = index"><a href="#" :class="{active: index === activeIndex}">{{item.name}}</a></li></ul></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {activeIndex: 0, // 记录高亮list: [{id: 1,name: '商品秒杀'}, {id: 2,name: '特价处理'}, {id: 3,name: '品牌优惠'}]}})</script>
</body>

2.2 操作style

2.2.1 语法

:style中的css属性会覆盖 class="box"的css样式

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

2.2.2 使用

<style>.box {width: 50px;height: 50px;background-color: red;}</style>
</head><body><div id="app"><div class="box" :style="{ width: '100px', height: '100px', backgroundColor: 'green' }"></div></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {}})</script>
</body>

2.2.3 Test

 <style>.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;}.inner {width: 50%;height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}.inner span {position: absolute;right: -20px;bottom: -25px;}</style>
</head><body><div id="app"><!-- 外层盒子底色 （黑色） --><div class="progress"><!-- 内层盒子 - 进度（蓝色） --><div class="inner" :style="{ width: percent+'%' }"><span>{{ percent }}%</span></div></div><button @click="percent = 25">设置25%</button><button @click="percent = 50">设置50%</button><button @click="percent = 75">设置75%</button><button @click="percent = 100">设置100%</button></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {percent: 30}})</script>
</body>

相关文章：

Vue中v-bind对样式控制的增强—(详解v-bind操作class以及操作style属性，附有案例+代码)

文章目录 v-bind对样式控制的增强2.1 操作class2.1.1 语法2.1.2 对象语法2.1.3 数组语法2.1.4 使用2.1.5 Test 2.2 操作style2.2.1 语法2.2.2 使用2.2.3 Test v-bind对样式控制的增强 2.1 操作class 2.1.1 语法 <div> :class "对象/数组">这是一个div&l…...

编程日记 2024/10/20 3:22:40

【分布式微服务云原生】《ZooKeeper 深度探秘：分布式协调的强大利器》

**《ZooKeeper 深度探秘&#xff1a;分布式协调的强大利器》 ** 摘要&#xff1a;本文将深入详解 ZooKeeper&#xff0c;涵盖其工作原理、实现分布式锁的方法、应用场景、负载均衡的实现以及不同角色的作用等内容。读者将全面了解 ZooKeeper 的强大功能和价值&#xff0c;为构…...

编程日记 2024/10/20 3:21:39

打造高性能在线电子表格：WebGL 渲染引擎 Kola2d 自研之路

导读&#xff1a;本文主要阐述了 Docs 在线表格为打造极致渲染性能所做的关键优化和过程思考&#xff0c;作为首个在在线电子表格领域自研基于WebGL渲染引擎的「吃螃蟹」者&#xff0c;整个过程面临诸多不确定性与挑战&#xff0c;Kola2d 的整体设计在此期间也经历了几轮推倒重…...

编程日记 2024/10/20 3:20:38

深入理解WPF中的命令机制

Windows Presentation Foundation&#xff08;WPF&#xff09;是微软推出的一种用于构建桌面客户端应用程序的技术。它被认为是现代Windows应用程序的基础&#xff0c;具有强大的图形和媒体处理能力。在WPF中&#xff0c;“命令”是一个重要的概念&#xff0c;它为应用程序开发…...

编程日记 2024/10/20 3:19:37

基础算法（6）——模拟

1. 替换所有的问号 题目描述&#xff1a; 算法思路&#xff1a; 从前往后遍历整个字符串&#xff0c;找到问号之后&#xff0c;尝试用 a ~ z 的每一个字符替换即可 注意点&#xff1a;需考虑数组开头和结尾是问号的边界情况 代码实现&#xff1a; class Solution {public …...

编程日记 2024/10/20 3:16:35

2025年广西高考报名流程图解（手机端）

广西 2025 年高考报名时间已经确定啦&#xff0c;从 2024 年 10 月 21 日开始&#xff0c;到 10 月 31 日 17:30 结束 &#x1f4bb;【报名路径】 有电脑端和手机端两种选择哦。 电脑端&#xff1a;登录 “广西招生考试院” 网站&#xff08;https://www.gxeea.cn&#xff0…...

编程日记 2024/10/20 3:15:34

十、结构型（外观模式）

外观模式&#xff08;Facade Pattern&#xff09; 概念 外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;旨在为复杂子系统提供一个简化的统一接口。通过外观模式&#xff0c;客户端可以与子系统交互&#xff0c;而无需了解子系统的内部复杂性…...

编程日记 2024/10/20 3:14:32

10.12Python数学基础-矩阵（上）

矩阵 1.矩阵定义 1.1 矩阵的定义 矩阵是由一组数按照矩形排列而成的数表。矩阵通常用大写字母表示&#xff0c;例如 AA、BB 等。矩阵中的每个数称为矩阵的元素或元。 一个 mn的矩阵 AA 可以表示为&#xff1a; A ( a 1 n a 12 … a 1 n a 21 a 22 … a 2 n ⋮ a m 1 a m 2…...

编程日记 2024/10/20 3:13:31

重学SpringBoot3-安装Spring Boot CLI

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-安装Spring Boot CLI 1. 什么是 Spring Boot CLI&#xff1f;2. Spring Boot CLI 的安装2.1. 通过 SDKMAN! 安装2.2. 通过 Homebrew 安装&#xff08;适…...

编程日记 2024/10/20 3:12:30

代码复现（五）：GCPANet

文章目录 net.py1.class Bottleneck&#xff1a;残差块2.class ResNet&#xff1a;特征提取3.class SRM&#xff1a;SR模块4.class FAM&#xff1a;FIA模块5.class CA&#xff1a;GCF模块6.class SA&#xff1a;HA模块7.class GCPANet&#xff1a;网络架构 train.pytest.py 论文…...

编程日记 2024/10/20 3:11:29

联邦学习实验复现—MNISIT IID实验 pytorch

联邦学习论文复现&#x1f680; 在精度的联邦学习的论文之后打算进一步开展写一个联邦学习的基础代码&#xff0c;用于开展之后的相关研究&#xff0c;首先就是复现一下论文中最基础也是最经典的MNIST IID(独立同分布划分) 数据集。然后由于这个联邦学习的论文是谷歌发的&#…...

编程日记 2024/10/20 3:07:25

2015年-2017年 计算机技术专业 程序设计题(算法题)实战_c语言程序设计数据结构程序设计分析

文章目录 20151.C语言算法设计部分2.数据结构算法设计部分 20161.C语言算法设计部分2.数据结构算法设计部分 2017年1. C语言算法设计部分2.数据结构算法设计部分 2015 1.C语言算法设计部分 int total(int n) {if(n1) return 1;return total(n-1)n1; } //主函数测试代码已省略…...

编程日记 2024/10/20 3:06:22

个人用计算理论导引笔记（待补充）

文章目录 一、正则语言预备知识确定性有穷自动机&#xff08;DFA&#xff09;设计DFA正则运算 非确定性有穷自动机&#xff08;NFA&#xff0c;含有 ε \varepsilon ε&#xff0c;下一个状态可以有若干种选择&#xff08;包括0种&#xff09;&#xff09;正则表达式定义计算优…...

编程日记 2024/10/20 3:05:21

2024年诺贝尔物理学奖揭晓：AI背后的“造梦者”是谁？

想象一下&#xff0c;你早上醒来&#xff0c;智能音箱为你播放天气和新闻&#xff0c;中午你用手机刷视频&#xff0c;精准的推荐内容简直和你心有灵犀&#xff0c;晚上回家&#xff0c;自动驾驶汽车安全地把你送回家。这一切看似理所当然&#xff0c;背后却有一双无形的手推动…...

编程日记 2024/10/20 3:02:18

2024年AI 制作PPT新宠儿，3款神器集锦，让你的演示与众不同

咱们今儿聊聊最近超火的AI做PPT的工具。这年头&#xff0c;谁不想省事儿&#xff0c;少熬夜加班&#xff0c;多享受享受生活啊&#xff1f;所以&#xff0c;AI开始帮咱们搞定做PPT这种费时的活儿&#xff0c;我自然得好好研究研究。今天&#xff0c;我就给大家详细说说三款很火…...

编程日记 2024/10/20 2:58:07

CLion和Qt 联合开发环境配置教程（Windows和Linux版）

需要安装的工具CLion 和Qt CLion下载链接 :https://www.jetbrains.com.cn/clion/ 这个软件属于直接默认安装就行&#xff0c;很简单&#xff0c;不多做介绍了 Qt:https://mirrors.tuna.tsinghua.edu.cn/qt/official_releases/online_installers/ window 直接点exe Linux 先c…...

编程日记 2024/10/20 2:57:06

Qt记录使用QtAwesome

Qt记录使用QtAwesome 基本使用 基本使用 pro文件添加 CONFIG fontAwesomeFree include(QtAwesome/QtAwesome.pri) //实例化QtAwesome fa::QtAwesome* awesome new fa::QtAwesome(this); awesome->initFontAwesome();//设置外置适应 图标ICON的颜色color QVariantMap opt…...

编程日记 2024/10/20 2:54:03

ES6新增promise（异步编程新解决方案）如何封装ajax？

1.什么是异步&#xff1f; 异步是指从程序在运行过程中可以先执行其他操作。 2.什么是promise&#xff1f; Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数&#xff0c;用来封装异步 操作并可以获取其成功或失败的结果&#xff1b; 3.promise成功…...

编程日记 2024/10/20 2:52:01

Kubernetes--深入理解Service与CoreDNS

文章目录 Service功能Service 的常见使用场景 Service的模式iptablesIPVS Service类型ClusterIPNodePortLoadBalancerExternalName Service的工作机制EndpointEndpoint 与 Service 的关系Endpoint 的工作原理命令操作 CoreDNSCoreDNS 的配置CoreDNS 的典型插件Corefile 示例Cor…...

编程日记 2024/10/20 2:51:00

AI大模型：开启智能革命新纪元

1.AI大模型技术&#xff1a;智能革命的新引擎 自2022年11月30日OpenAI推出ChatGPT以来&#xff0c;这一大型语言模型&#xff08;LLM&#xff09;迅速走红&#xff0c;标志着AI领域进入了一个新的发展阶段&#xff0c;即AI大模型时代。 这一时代预示着AI正朝着通用人工智能&am…...

编程日记 2024/10/20 2:49:58

这份数据挖掘方法实战选择指南，将带你掌握实战中如何选对方法，用好数据挖掘，助力你在实战中斩获佳绩。

好的&#xff0c;针对“机器学习中数据挖掘方法与选择&#xff0c;结合实战使用与实例选择详解”这一问题&#xff0c;我们首先进行解构与推演。 核心问题在于如何在实战中为不同数据集和目标选择合适的预处理与挖掘方法。 答案将聚焦于一个从目标出发、数据驱动、迭代验证的…...

编程新知 2026/4/8 12:18:21

Claude道歉！爆火研究漏引华人团队成果

点击下方卡片&#xff0c;关注“CVer”公众号AI/CV重磅干货&#xff0c;第一时间送达点击进入—>【顶会/顶刊】投稿交流群添加微信号&#xff1a;CVer2233&#xff0c;小助手拉你进群&#xff01;扫描下方二维码&#xff0c;加入CVer学术星球&#xff01;可以获得最新顶会/顶…...

编程新知 2026/4/8 12:16:19

AI人脸隐私卫士企业应用：会议合影自动脱敏合规方案

AI人脸隐私卫士企业应用&#xff1a;会议合影自动脱敏合规方案 关键词&#xff1a;企业隐私合规、会议合影脱敏、人脸自动打码、MediaPipe、本地离线处理、数据安全、GDPR、个人信息保护 摘要&#xff1a;在企业日常运营中&#xff0c;会议、团建、培训等活动产生的合影照片&…...

编程新知 2026/4/8 11:49:56

颠覆传统部署范式：VisualCppRedist AIO重构Windows运行时管理体验

颠覆传统部署范式&#xff1a;VisualCppRedist AIO重构Windows运行时管理体验 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 在Windows软件开发与运维领域&…...

编程新知 2026/4/8 11:08:59

ModbusRTU上位机系统功能说明文档

C# ModbusRtu或者TCP协议上位机源码&#xff0c;包括存储&#xff0c;数据到SQL SERVER数据库&#xff0c;趋势曲线图&#xff0c;数据报表&#xff0c;实时和历史报警界面&#xff0c;有详细注释&#xff0c;需要哪个协议版本一、系统概述 ModbusRTU上位机系统是基于C#语言开发…...

编程新知 2026/4/8 10:19:31

我的数字记忆宝库：用m4s-converter守护那些即将消失的美好

我的数字记忆宝库&#xff1a;用m4s-converter守护那些即将消失的美好 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 去年冬天&#xff0c;我整…...

编程新知 2026/4/8 9:58:44

手把手教你搭建simple-breakpad-server在线解析服务（含curl上传示例）

构建企业级崩溃分析系统&#xff1a;从Simple-Breakpad-Server部署到实战解析 在软件开发的生命周期中&#xff0c;系统崩溃是无法完全避免的挑战。当用户报告"程序突然退出"或"闪退"时&#xff0c;传统的日志往往难以定位根本原因。这时&#xff0c;一个…...

编程新知 2026/4/8 9:52:26

Phi-4-mini-reasoning模型效果展示：智能解读操作系统核心概念

Phi-4-mini-reasoning模型效果展示&#xff1a;智能解读操作系统核心概念 1. 模型能力概览 Phi-4-mini-reasoning是一款专注于技术概念解析的轻量级模型&#xff0c;特别擅长用通俗易懂的方式拆解复杂系统原理。在操作系统这类抽象概念的解释上&#xff0c;它能将教科书式的定…...

编程新知 2026/4/8 9:00:10

【ArUco GridBoard实战】从生成到高精度位姿估计全流程解析

1. ArUco GridBoard技术解析与应用场景 在工业视觉和机器人定位领域&#xff0c;精确的位姿估计是核心需求。ArUco GridBoard作为一种特殊的标记板&#xff0c;相比单个ArUco标记具有显著优势。我曾在多个工业项目中实测发现&#xff0c;使用5x7的GridBoard在3cm2cm的限定尺寸下…...

编程新知 2026/4/8 6:22:12

HY-Motion 1.0未来演进：支持多人协同与简单物体交互的路线图解析

HY-Motion 1.0未来演进&#xff1a;支持多人协同与简单物体交互的路线图解析 1. 引言&#xff1a;从单人到互动的跨越 HY-Motion 1.0的发布&#xff0c;让文字描述转化为流畅、逼真的3D人体动作变得触手可及。无论是健身动作、日常行为还是复杂的舞蹈编排&#xff0c;这个十亿…...

编程新知 2026/4/8 5:53:46