Vue中v-bind对样式控制的增强—(详解v-bind操作class以及操作style属性，附有案例+代码)
文章目录
- 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…...
【分布式微服务云原生】《ZooKeeper 深度探秘：分布式协调的强大利器》
**《ZooKeeper 深度探秘：分布式协调的强大利器》 ** 摘要：本文将深入详解 ZooKeeper，涵盖其工作原理、实现分布式锁的方法、应用场景、负载均衡的实现以及不同角色的作用等内容。读者将全面了解 ZooKeeper 的强大功能和价值，为构…...
打造高性能在线电子表格：WebGL 渲染引擎 Kola2d 自研之路
导读：本文主要阐述了 Docs 在线表格为打造极致渲染性能所做的关键优化和过程思考，作为首个在在线电子表格领域自研基于WebGL渲染引擎的「吃螃蟹」者，整个过程面临诸多不确定性与挑战，Kola2d 的整体设计在此期间也经历了几轮推倒重…...
深入理解WPF中的命令机制
Windows Presentation Foundation（WPF）是微软推出的一种用于构建桌面客户端应用程序的技术。它被认为是现代Windows应用程序的基础，具有强大的图形和媒体处理能力。在WPF中，“命令”是一个重要的概念，它为应用程序开发…...
基础算法（6）——模拟
1. 替换所有的问号 题目描述： 算法思路： 从前往后遍历整个字符串，找到问号之后，尝试用 a ~ z 的每一个字符替换即可 注意点：需考虑数组开头和结尾是问号的边界情况 代码实现： class Solution {public …...
2025年广西高考报名流程图解（手机端）
广西 2025 年高考报名时间已经确定啦，从 2024 年 10 月 21 日开始，到 10 月 31 日 17:30 结束 💻【报名路径】 有电脑端和手机端两种选择哦。 电脑端：登录 “广西招生考试院” 网站（https://www.gxeea.cn࿰…...
十、结构型（外观模式）
外观模式（Facade Pattern） 概念 外观模式（Facade Pattern）是一种结构型设计模式，旨在为复杂子系统提供一个简化的统一接口。通过外观模式，客户端可以与子系统交互，而无需了解子系统的内部复杂性…...
10.12Python数学基础-矩阵（上）
矩阵 1.矩阵定义 1.1 矩阵的定义 矩阵是由一组数按照矩形排列而成的数表。矩阵通常用大写字母表示，例如 AA、BB 等。矩阵中的每个数称为矩阵的元素或元。 一个 mn的矩阵 AA 可以表示为： A ( a 1 n a 12 … a 1 n a 21 a 22 … a 2 n ⋮ a m 1 a m 2…...
重学SpringBoot3-安装Spring Boot CLI
更多SpringBoot3内容请关注我的专栏：《SpringBoot3》 期待您的点赞👍收藏⭐评论✍ 重学SpringBoot3-安装Spring Boot CLI 1. 什么是 Spring Boot CLI？2. Spring Boot CLI 的安装2.1. 通过 SDKMAN! 安装2.2. 通过 Homebrew 安装（适…...
代码复现（五）：GCPANet
文章目录 net.py1.class Bottleneck：残差块2.class ResNet：特征提取3.class SRM：SR模块4.class FAM：FIA模块5.class CA：GCF模块6.class SA：HA模块7.class GCPANet：网络架构 train.pytest.py 论文…...
联邦学习实验复现—MNISIT IID实验 pytorch
联邦学习论文复现🚀 在精度的联邦学习的论文之后打算进一步开展写一个联邦学习的基础代码，用于开展之后的相关研究，首先就是复现一下论文中最基础也是最经典的MNIST IID(独立同分布划分) 数据集。然后由于这个联邦学习的论文是谷歌发的&#…...
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; } //主函数测试代码已省略…...
个人用计算理论导引笔记（待补充）
文章目录 一、正则语言预备知识确定性有穷自动机（DFA）设计DFA正则运算 非确定性有穷自动机（NFA，含有 ε \varepsilon ε，下一个状态可以有若干种选择（包括0种））正则表达式定义计算优…...
2024年诺贝尔物理学奖揭晓：AI背后的“造梦者”是谁？
想象一下，你早上醒来，智能音箱为你播放天气和新闻，中午你用手机刷视频，精准的推荐内容简直和你心有灵犀，晚上回家，自动驾驶汽车安全地把你送回家。这一切看似理所当然，背后却有一双无形的手推动…...
2024年AI 制作PPT新宠儿，3款神器集锦，让你的演示与众不同
咱们今儿聊聊最近超火的AI做PPT的工具。这年头，谁不想省事儿，少熬夜加班，多享受享受生活啊？所以，AI开始帮咱们搞定做PPT这种费时的活儿，我自然得好好研究研究。今天，我就给大家详细说说三款很火…...
CLion和Qt 联合开发环境配置教程（Windows和Linux版）
需要安装的工具CLion 和Qt CLion下载链接 :https://www.jetbrains.com.cn/clion/ 这个软件属于直接默认安装就行，很简单，不多做介绍了 Qt:https://mirrors.tuna.tsinghua.edu.cn/qt/official_releases/online_installers/ window 直接点exe Linux 先c…...
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…...
ES6新增promise（异步编程新解决方案）如何封装ajax？
1.什么是异步？ 异步是指从程序在运行过程中可以先执行其他操作。 2.什么是promise？ Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步 操作并可以获取其成功或失败的结果； 3.promise成功…...
Kubernetes--深入理解Service与CoreDNS
文章目录 Service功能Service 的常见使用场景 Service的模式iptablesIPVS Service类型ClusterIPNodePortLoadBalancerExternalName Service的工作机制EndpointEndpoint 与 Service 的关系Endpoint 的工作原理命令操作 CoreDNSCoreDNS 的配置CoreDNS 的典型插件Corefile 示例Cor…...
AI大模型：开启智能革命新纪元
1.AI大模型技术：智能革命的新引擎 自2022年11月30日OpenAI推出ChatGPT以来，这一大型语言模型（LLM）迅速走红，标志着AI领域进入了一个新的发展阶段，即AI大模型时代。 这一时代预示着AI正朝着通用人工智能&am…...
uniapp 对接腾讯云IM群组成员管理（增删改查）
UniApp 实战：腾讯云IM群组成员管理（增删改查） 一、前言 在社交类App开发中，群组成员管理是核心功能之一。本文将基于UniApp框架，结合腾讯云IM SDK，详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）
HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标 商品数据同步 场景：将1688商品信息…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异 数据类型差异ÿ…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案：创建非 roo…...
第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代，智能代理（agents）不再是孤立的个体，而是能够像一个数字团队一样协作。然而，当前 AI 生态系统的碎片化阻碍了这一愿景的实现，导致了“AI 巴别塔问题”——不同代理之间…...
BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践
6月5日，2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席，并作《智能体在安全领域的应用实践》主题演讲，分享了在智能体在安全领域的突破性实践。他指出，百度通过将安全能力…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具
第2章 虚拟机性能监控，故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计，聪明的码友立马就知道了，该到数据访问模块了，要不就这俩玩个6啊，查库势在必行，至此，它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据（数据库、No…...