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

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

news 文章来源：https://blog.csdn.net/weixin_54555405/article/details/142966358 2025/5/15 22:19:10

文章目录

  • 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

快速上手C语言【下】（非常详细！！！)

目录 1. 指针 1.1 指针是什么 1.2 指针类型 1.2.1 指针-整数 1.2.2 指针解引用 1.3 const修饰 1.4 字符指针 1.5 指针-指针 1.6 二级指针 2. 数组 2.1 定义和初始化 2.2 下标引用操作符[ ] 2.3 二维数组 2.4 终极测试 3. 函数 3.1 声明和定义 3.2 传值调用…...

编程日记 2024/10/20 2:47:56

红黑树的理解与实现（详解）

相关的数据结构&#xff1a; 搜索二叉树-CSDN博客 AVL树的创建与检测-CSDN博客 个人主页&#xff1a;敲上瘾-CSDN博客 个人专栏&#xff1a;游戏、数据结构、c语言基础、c学习、算法 目录 一、红黑树规则&#xff1a; 二、红黑树的插入 1.变色 2.单旋变色 3.双旋变色 三、…...

编程日记 2024/10/20 2:46:55

从一到无穷大 #37 Databricks Photon：打响 Spark Native Engine 第一枪

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)&#xff0c;由 李兆龙 确认&#xff0c;转载请注明版权。 文章目录 引言技术决策JVM vs. Native ExecutionInterpreted Vectorization vs Code-GenRow vs…...

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

Java 字符串占位格式化

Java 提供了几种方式来处理字符串占位符&#xff0c;最常用的是 String 类的 format 方法和 MessageFormat 类。以下是这两种方法的详细说明和示例。 1、String.format 基本语法&#xff1a; String formatted String.format("格式字符串", 参数1, 参数2, ...); …...

编程日记 2024/10/20 2:44:53

基于netty实现简易版rpc服务-理论分析

1.技术要点 1.1 rpc协议 定义一个rpc协议类&#xff0c;用于rpc服务端和客户端数据交互。 1.2 netty粘包半包处理 由于数据传说使用tcp协议&#xff0c;rpc协议的数据在网络传输过程中会产生三种情况&#xff1a; 1&#xff09;刚好是完整的一条rpc协议数据 2&#xff09;不…...

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

Elasticsearch高级搜索技术-全文搜索

目录 倒排索引 (Inverted Index) 示例 分词器 (Analyzer) 评分机制 (Scoring) 查询执行 match 查询 match_phrase 查询 全文搜索是Elasticsearch的核心功能之一&#xff0c;它通过复杂的算法和数据结构来提供高效的搜索能力。为了深入理解其工作原理&#xff0c;我们需要…...

编程日记 2024/10/20 2:40:48

案例分享—国外优秀UI卡片设计作品赏析

国外UI设计注重用户体验&#xff0c;倾向于采用简洁的布局、清晰的排版和直观的交互方式&#xff0c;减少用户的认知负担。卡片式设计能够完美利用屏幕空间&#xff0c;使内容一目了然&#xff0c;易于用户快速浏览和阅读&#xff0c;从而提升了整体的用户体验。 更加注重扁平化…...

编程日记 2024/10/20 2:38:46

Go语言基础学习(Go安装配置、基础语法)

一、简介及安装教程 1、为什么学习Go&#xff1f; 简单好记的关键词和语法&#xff1b;更高的效率&#xff1b;生态强大&#xff1b;语法检查严格&#xff0c;安全性高&#xff1b;严格的依赖管理&#xff0c; go mod 命令&#xff1b;强大的编译检查、严格的编码规范和完整的…...

编程日记 2024/10/20 2:37:45

STM32—FLASH闪存

1.FLASH简介 STM32F1系列的FLASH包含程序存储器、系统存储器和选项字节三个部分&#xff0c;通过闪存存储器接口&#xff08;外设&#xff09;可以对程序存储器和选项字节进行擦除和编程 我们怎么操作这些存储器呢&#xff1f;这就需要用到这个闪存存储器接口了&#xff0c;闪…...

编程日记 2024/10/20 2:34:40

AP上线的那些事儿（1）capwap建立过程、设备初始化以及二层上线

1、了解FITAP与AC的建立过程 之前我们已经知道了FATAP与FIT是一对双胞胎一样的兄弟&#xff0c;FAT哥哥能够直接独立使用当AP桥接、路由器等&#xff0c;而弟弟FIT则比较薄弱&#xff0c;独自发挥不出功效&#xff0c;需要一位师傅&#xff08;AC&#xff09;来带领&#xff0c…...

编程日记 2024/10/20 2:30:36