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

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

news 2025/7/13 14:28:37

文章目录

  • 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

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/7/12 13:52:29

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/7/5 14:33:07

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/7/13 6:21:16

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2025/7/12 23:15:29

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

编程新知 2025/7/12 16:33:52

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2025/7/13 14:09:13

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2025/7/13 8:49:18

ubuntu22.04有线网络无法连接，图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

编程新知 2025/7/13 9:02:21

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

编程新知 2025/7/6 19:40:32

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/6/21 15:21:51