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…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
Java入门学习详细版（一）
大家好，Java 学习是一个系统学习的过程，核心原则就是“理论 实践 坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...
优选算法第十二讲：队列 + 宽搜 优先级队列
优选算法第十二讲：队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计，遵循“让事情保…...
使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践
作者：吴岐诗，杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言：融合数据湖与数仓的创新之路 在数字金融时代，数据已成为金融机构的核心竞争力。杭银消费金…...
从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障
关键领域软件测试的"安全密码"：Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力，从金融交易到交通管控，这些关乎国计民生的关键领域…...
小木的算法日记-多叉树的递归/层序遍历
🌲 从二叉树到森林：一文彻底搞懂多叉树遍历的艺术 🚀 引言 你好，未来的算法大神！ 在数据结构的世界里，“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的，它…...
的打车小程序)
基于鸿蒙(HarmonyOS5)的打车小程序
1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...