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

Vue 绑定style和class

在应用界面中,某些元素的样式是动态的。class 与 style 绑定就是专门用来实现动态样式效果的技术。

如果需要动态绑定 class 或 style 样式,可以使用 v-bind 绑定。

 绑定 class 样式【字符串写法】

适用于:类名不确定,需要动态指定。

.box{width: 100px;height: 100px;
}
.aqua{background-color: aqua;
}
.red{background-color: red;
}
<div id="APP"><div class="box" :class="back" @click="toggleBack">点击变成红色</div>
</div>

:第二个 class 使用的是 v-bind 简写的方式, :class=" " 。

const vm = new Vue({el: "#APP",data(){return {back:"aqua"}},methods:{toggleBack(){this.back = "red";}}
});

点击前:

点击后:

 绑定 class 样式【数组写法】:

适用于:要绑定多个样式,个数不确定,名字也不确定。

.box{width: 100px;height: 100px;
}
.aqua{background-color: aqua;
}
.border{border: 20px solid red;
}
.radius{border-radius: 25px;
}
<div id="APP"><div class="box" :class="classArr">多个class样式</div>
</div>
const vm = new Vue({el: "#APP",data(){return {classArr:["aqua","border","radius"]}}
});

如果要绑定多个样式,个数确定,但是名字不确定,也可以使用以下写法: 

<div id="APP"><div class="box" :class="[a,b,c]">多个class样式</div>
</div>
const vm = new Vue({el: "#APP",data(){return {a: "aqua",b: "border",c: "radius"}}
});

:效果与上边的示例相同,a、b、c 都是变量,控制是否使用某个 class 样式。

原创作者:吴小糖

创作时间:2023.10.13 

相关文章:

Vue 绑定style和class

在应用界面中&#xff0c;某些元素的样式是动态的。class 与 style 绑定就是专门用来实现动态样式效果的技术。 如果需要动态绑定 class 或 style 样式&#xff0c;可以使用 v-bind 绑定。 绑定 class 样式【字符串写法】 适用于&#xff1a;类名不确定&#xff0c;需要动态指…...

【Electron+Vue】Error: error:0308010C:digital envelope routines::unsupported

问题描述 使用 electron-builder 构建 vue 项目&#xff0c;运行 npm run electron:build &#xff0c;构建过程报错。 / Bundling main process...ERROR Failed to compile with 1 errors …...

第7章 验证你的 Micro SaaS 应用程序构想

虽然可以使用一些软性验证技术,但要完全验证你的 Micro SaaS 创意,其实只有一种方法:为你的应用程序打造一个最基本的 MVP(最小化可行产品)版本,把它放出去,看看人们是否愿意为它买单。 不过,在开始构建 MVP 之前,您也可以利用一些软性验证检查,然后再继续编写应用程…...

【微服务部署】七、使用Docker安装Nginx并配置免费的SSL证书步骤详解

SSL&#xff08;Secure Socket Layer&#xff0c;安全套接字层&#xff09;证书是一种数字证书&#xff0c;用于加密网站与访问者之间的数据传输。SSL证书是网站安全和可靠性的重要保证&#xff0c;是建立信任和保护用户隐私的重要手段。其作用可以总结为以下几点&#xff1a; …...

【Java 进阶篇】JavaScript 中的全局对象和变量

JavaScript 是一门非常强大的编程语言&#xff0c;它提供了许多全局对象和变量&#xff0c;以便于在整个应用程序中共享数据和功能。本文将详细介绍 JavaScript 中的全局对象和变量&#xff0c;包括全局对象、全局变量、全局函数以及它们的用途和示例。 全局对象 JavaScript …...

Stm32_标准库_12_串口_发送数据

波特率&#xff1a;约定的传输速率&#xff0c;1000bps,1s发1000位 引脚 结构 数据帧的传输特点 代码&#xff1a; #include "stm32f10x.h" // Device header #include "Delay.h" #include "OLED.h"GPIO_InitTypeDef GPIO_InitStruct; USART…...

“之江创客”跨境电商赛区决赛暨浙南新电商发展论坛圆满落幕

9月26日&#xff0c;由商务部中国国际电子商务中心指导&#xff0c;浙江省商务厅等十个部门主办&#xff0c;浙江省电子商务促进中心、温州市商务局、苍南县人民政府承办的“之江创客”2023全球电子商务创业创新大赛跨境电商赛区决赛暨浙南新电商发展论坛在苍南圆满落幕。浙江省…...

使用antd-pro脚手架搭建react ts项目

Pro 中使用 TypeScript 来作为默认的开发语言&#xff0c;TypeScript 的好处已经无须赘述&#xff0c;无论是开发成本还是维护成本都能大大减少&#xff0c;是中后台开发的必选。 初始化 提供了 pro-cli 来快速的初始化脚手架。 # 使用 npm npm i ant-design/pro-cli -g pro…...

推荐几款简单易用的协作化项目管理工具

您是否正在寻找一种有效且简单的项目管理工具来帮助您与团队成员协作?项目管理工具在当今的商业世界中已经变得必不可少&#xff0c;因为它们帮助团队保持组织和生产力。找到合适的工具是困难的&#xff0c;因为有太多的选择。有些工具是为特定类型的项目设计的&#xff0c;而…...

【Redis】Hash 哈希相关的命令

命令 HSET 设置hash中指定的字段&#xff08;field&#xff09;的值&#xff08;value&#xff09;。 HSET key field value [field value ...]HGET 获取hash中指定字段的值。 HGET key fieldHEXISTS 判断hash中是否有指定的字段。 HEXISTS key fieldHDEL 删除hash中指定…...

人大金仓分析型数据库常见性能原因

目录 硬件失效 管理负载 避免竞争 统计信息 识别问题 调整统计 优化分布 优化设计 硬件失效 数据库的性能取决于它所运行的硬件基础设施。数据库由多台服务器&#xff08;主机&#xff09;构成&#xff0c;它们作为一个紧密的系统&#xff08;阵列&#xff09;一起工作。…...

【OpenCv光流法进行运动目标检测】

opencv系列文章目录 文章目录 opencv系列文章目录前言一、光流法是什么&#xff1f;二、光流法实例1.C的2.C版本3.python版本 总结 前言 随着计算机视觉技术的迅猛发展&#xff0c;运动目标检测在图像处理领域中扮演着至关重要的角色。在现实世界中&#xff0c;我们常常需要追…...

Word论文封面下划线怎么都对不齐

我们常常发现&#xff0c;无论是写论文还是平时填写word封面的信息的时候&#xff0c;下划线老是随着字符的多少的边长变短&#xff0c;我们使用空格键也非常不好对齐&#xff0c;这就给我们造成了很大的烦恼&#xff0c;想想自己也是这样&#xff0c;我一旦输入字符&#xff0…...

汇编经典程序——将一个字节数据以十六进制形式显示

法一&#xff1a; 由于0-9的ASCII码实际值30h&#xff0c;A-Z的ASCII码实际值37h&#xff0c;故直接加对应的数即可 ;该程序将一个字节数据以十六进制形式显示&#xff08;直接加对应数值&#xff09;.model small .stack .data hex db 4bh.code .startup;显示高位mov al,hex…...

Remix 开发小技巧(五)

文章目录 类型安全的 Fetcher 钩子一切从资源路由开始RPC 只是使用内置的 URL 获取使用 Zod 验证您的 RPC下一步是自定义提取器钩子 黑暗模式主题切换“最佳用户体验”是什么意思&#xff1f;第一个要求第二个要求第三个要求第四个要求 类型安全的 Fetcher 钩子 RPC 是一种远程…...

hive抽取mysql里的表,如果mysql表没有时间字段如何做增量抽取数据

如果MySQL表中没有时间字段&#xff0c;你可以通过其他方式实现增量抽取数据&#xff0c;以下是一些常见的方式&#xff1a; 使用自增主键&#xff1a;如果MySQL表中有自增主键&#xff0c;你可以记录上一次抽取数据时最大的主键值&#xff08;即上一次抽取数据的结束位置&…...

20和遍历以及迭代器有关的一些东西

知识点有点散&#xff0c;只能这样记录了 1、这边是和遍历有关的&#xff1a; class Person:def __init__(self):self.result 1def __getitem__(self, item):self.result 1if self.result > 6:raise StopIteration(停止遍历)return self.resultpassp Person() for i in…...

前端工程化(editorconfig+ESLint+Prettier+StyleLint+Husky、Commitlint)

前言 致谢&#xff1a;有来技术大大 通过学习有来技术大大的文章和结合自己的实践&#xff0c;写一篇笔记记录一下 所使用的工具&#xff1a; ide项目风格(editorconfig)代码检查(ESLint)代码风格(Prettier)样式风格(StyleLint)git提交规范(Husky、Commitlint) 一、ide项目…...

UI自动化测试:Selenium+PO模式+Pytest+Allure整合

本人目前工作中未涉及到WebUI自动化测试&#xff0c;但为了提升自己的技术&#xff0c;多学习一点还是没有坏处的&#xff0c;废话不多说了&#xff0c;目前主流的webUI测试框架应该还是selenium&#xff0c;考虑到可维护性、拓展性、复用性等&#xff0c;我们采用PO模式去写我…...

【排序算法】详解冒泡排序及其多种优化稳定性分析

文章目录 算法原理细节分析优化1优化2算法复杂度分析稳定性分析总结 算法原理 冒泡排序(Bubble Sort) 就是从序列中的第一个元素开始&#xff0c;依次对相邻的两个元素进行比较&#xff0c;如果前一个元素大于后一个元素则交换它们的位置。如果前一个元素小于或等于后一个元素…...

AnythingtoRealCharacters2511镜像免配置部署教程:Docker+ComfyUI开箱即用方案

AnythingtoRealCharacters2511镜像免配置部署教程&#xff1a;DockerComfyUI开箱即用方案 想快速将动漫人物变成真实照片&#xff1f;这个教程教你10分钟搞定专业级动漫转真人效果&#xff0c;无需任何技术背景&#xff01; 1. 为什么选择这个镜像&#xff1f; 如果你曾经尝试…...

INNISO1接口模块

INNIS01 接口模块INNIS01 是一款应用于工业自动化控制系统中的接口模块&#xff0c;主要用于实现控制系统内部或与外部设备之间的信号连接与数据交互&#xff0c;属于系统中的通信与接口扩展单元。一、基本概述INNIS01 接口模块通常用于连接控制器与现场设备或其他功能模块&…...

OpenCore Legacy Patcher终极指南:让老旧Mac焕发新生的完整方案

OpenCore Legacy Patcher终极指南&#xff1a;让老旧Mac焕发新生的完整方案 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher OpenCore Legacy Patcher&#xf…...

快速掌握C#语言基础知识点(16.访问修饰符)

关注我的动态 namespace _16.访问修饰符 {internal class Program {//私有内部类&#xff0c;被嵌套定义&#xff0c;能被直接外部类访问&#xff0c;外部类之外无法访问private class Class_Private{//公有public int a { get; set; }//私有private int b { get; set; }//受保…...

算法对齐还是实战突围?解构GEO优化中方法论与实践的权重博弈

在生成式人工智能&#xff08;AIGC&#xff09;重塑全球信息检索范式的当下&#xff0c;生成式引擎优化&#xff08;Generative Engine Optimization, GEO&#xff09;已从一种前沿概念演变为品牌流量增长的底层操作系统。随着大语言模型&#xff08;LLM&#xff09;与检索增强…...

renren-fast-vue系统配置中心使用指南:灵活配置与动态切换

renren-fast-vue系统配置中心使用指南&#xff1a;灵活配置与动态切换 【免费下载链接】renren-fast-vue renren-fast-vue基于vue、element-ui构建开发&#xff0c;实现renren-fast后台管理前端功能&#xff0c;提供一套更优的前端解决方案。 项目地址: https://gitcode.com/…...

英特尔 BOT 优化 Geekbench 6:性能提升背后的争议与影响

【导语&#xff1a;英特尔的二进制优化工具&#xff08;BOT&#xff09;引发关注&#xff0c;它能修改可执行文件指令序列提升性能&#xff0c;但仅与少数应用配合。研究人员对其在 Geekbench 6 上的表现进行测试&#xff0c;结果引发对基准测试公平性的思考。】启动开销&#…...

避坑指南:Informer模型更换自定义数据集时,90%新手会忽略的5个关键参数

Informer模型自定义数据集避坑指南&#xff1a;5个关键参数详解与实战调优 第一次尝试将Informer模型应用到自己的数据集上时&#xff0c;我盯着屏幕上那一串令人绝望的报错信息发呆了整整半小时。明明已经按照官方示例修改了数据路径和基本参数&#xff0c;为什么模型要么无法…...

为什么需要虚拟摄像头?OBS-VirtualCam 3大核心价值解析

为什么需要虚拟摄像头&#xff1f;OBS-VirtualCam 3大核心价值解析 【免费下载链接】obs-virtual-cam obs-studio plugin to simulate a directshow webcam 项目地址: https://gitcode.com/gh_mirrors/ob/obs-virtual-cam 在视频会议和在线教学中&#xff0c;你是否曾希…...

OpenClaw语音控制之多麦克风阵列与声源定位技术的应用

7.1 麦克风阵列基础 7.1.1 阵列定义与原理 麦克风阵列是由多个麦克风按照特定几何结构排列组成的声学传感器系统。与单麦克风相比,阵列系统通过空间采样能够实现声场的时空联合处理,从而获得方向性选择能力。这种空间处理能力是语音交互系统在复杂声学环境中保持高性能的关…...