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

【vue3】数据绑定，动态渲染class与style

news 来源：原创 2024/5/20 23:08:10

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式（style）。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

绑定 class

绑定对象

我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：

<div :class="{ active: isActive }"></div>

上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。

你可以在对象中写多个字段来操作多个 class。此外，:class 指令也可以和一般的 class attribute 共存。举例来说，下面这样的状态：

data() {return {isActive: true,hasError: false}
}

配合以下模板：

<divclass="static":class="{ active: isActive, 'text-danger': hasError }"
></div>

渲染的结果会是：

<div class="static active"></div>

当 isActive 或者 hasError 改变时，class 列表会随之更新。举例来说，如果 hasError 变为 true，class 列表也会变成 “static active text-danger”。

绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象：

data() {return {classObject: {active: true,'text-danger': false}}
}

<div :class="classObject"></div>

这也会渲染出相同的结果。我们也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：

data() {return {isActive: true,error: null}
},
computed: {classObject() {return {active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal'}}
}

<div :class="classObject"></div>

绑定数组

我们可以给 :class 绑定一个数组来渲染多个 CSS class：

data() {return {activeClass: 'active',errorClass: 'text-danger'}
}

<div :class="[activeClass, errorClass]"></div>

渲染的结果是：

<div class="active text-danger"></div>

如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：

<div :class="[isActive ? activeClass : '', errorClass]"></div>

errorClass 会一直存在，但 activeClass 只会在 isActive 为真时才存在。

然而，这可能在有多个依赖条件的 class 时会有些冗长。因此也可以在数组中嵌套对象：

<div :class="[{ active: isActive }, errorClass]"></div>

在组件上使用

对于只有一个根元素的组件，当你使用了 class attribute 时，这些 class 会被添加到根元素上，并与该元素上已有的 class 合并。

举例来说，如果你声明了一个组件名叫 MyComponent，模板如下：

<!-- 子组件模板 -->
<p class="foo bar">Hi!</p>

在使用时添加一些 class：

<!-- 在使用组件时 -->
<MyComponent class="baz boo" />

渲染出的 HTML 为：

<p class="foo bar baz boo">Hi!</p>

Class 的绑定也是同样的：

<MyComponent :class="{ active: isActive }" />

当 isActive 为真时，被渲染的 HTML 会是：

<p class="foo bar active">Hi!</p>

如果你的组件有多个根元素，你将需要指定哪个根元素来接收这个 class。你可以通过组件的 $attrs 属性来实现指定：

<!-- MyComponent 模板使用 $attrs 时 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<MyComponent class="baz" />

这将被渲染为：

<p class="baz">Hi!</p>
<span>This is a child component</span>

绑定内联样式style

绑定对象

:style 支持绑定 JavaScript 对象值，对应的是 HTML 元素的 style 属性：

data() {return {activeColor: 'red',fontSize: 30}
}

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

尽管推荐使用 camelCase，但 :style 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称)，例如：

<div :style="{ 'font-size': fontSize + 'px' }"></div>

直接绑定一个样式对象通常是一个好主意，这样可以使模板更加简洁：

data() {return {styleObject: {color: 'red',fontSize: '13px'}}
}

<div :style="styleObject"></div>

同样的，如果样式对象需要更复杂的逻辑，也可以使用返回样式对象的计算属性。

绑定数组

我们还可以给 :style 绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上：

<div :style="[baseStyles, overridingStyles]"></div>

如何模拟HTTP请求并验证功能

要模拟HTTP请求并验证功能，你可以使用Spring Boot提供的MockMvc工具，它允许我们在没有实际启动HTTP服务器的情况下测试Spring MVC控制器。以下是一个使用MockMvc进行HTTP请求模拟和验证的示例： import org.junit.jupiter.api.BeforeEach; import org.junit.jupiter.api.Te…...

编程日记 2024/5/20 18:23:55

主流原型工具的设计

Axure（Axure RP） 1、交互设计：Axure提供了丰富的交互元素和动作，可以创建复杂的交互流程和状态转换，用于验证和演示产品功能。也就是在用户做什么行为的时候，触发了后面所设置的一系列动作。 2、高保真原型设计：Axure支持添加交互动画、过渡效果、表单输入和数据模拟等功…...

编程日记 2024/5/20 15:42:59

Java集合实战

ArrayList 排序 Collections.sort()默认将元素升序排序，前提是集合的元素支持自热顺序，即实现了 Comparable 接口的，如 String, Integer。Collections.sort()也可以传一个 Comparable 参数实现自定义排序。 public static void main(String[] args) {List<Integer> li…...

编程日记 2024/5/20 8:00:32

最优贸易

这道题目其实可以只用一次dp 设$f[i]$表示从$1$到$i$所经过点的最小权值，那么$ans=max(w[i]-f[i])$ 但是这样做有一个问题，不是所有的点都可以到$n$的所以相当于还是要跑一次搜索来标记...

编程日记 2024/5/19 18:40:53

接触galgame之路

接触galgame之路终于找到一个安静且悠闲的时间，趁着还记得，记下来。虽然每当记录的时候都会担忧自己当前的状态是否能更全面客观记录以前的东西，是否会少记一些东西。这时就体现出来写作的重要性了。此处galgame和视觉小说之类的作品大多一个意思。以剧情为主，剧情以恋爱情…...

编程日记 2024/5/18 23:43:41

Python Pandas 数据分组

在数据处理中，分箱、分组是一种常见的技术，用于将连续数据的间隔分组到“箱”或“桶”中。我们将讨论以下两种方法：使用 Pandas 的 between 和 loc 方法：between 方法返回一个布尔向量，指示 Series 元素是否位于给定的边界值之间。loc 方法用于根据条件选择数据。示例：将…...

编程日记 2024/5/18 23:37:40

【vue3】数据绑定，动态渲染class与style

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式（style）。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时&#xff0c…...

编程日记 2024/5/20 23:08:10

axios使用

参考地址：https://github.com/axios/axios html CDN <script src"https://cdn.jsdelivr.net/npm/axios1.1.2/dist/axios.min.js"></script>或者 <script src"https://unpkg.com/axios1.1.2/dist/axios.min.js"></scrip…...

编程日记 2024/5/20 23:08:08

countup.js 数字动画

countup.js 数字动画1. 安装2. 参数3. Vue组件封装3.1 组件代码3.2 调用方式1. 安装 npm i countup.js2. 参数项目Valuetargetstring, HTMLElement ,HTMLInputElement - id of html element, input, svg text element, or DOM element reference where counting occursendV…...

编程日记 2024/5/15 13:09:11

10个问题带你全面理解Linux性能优化

1. 为什么面试官喜欢考察性能优化问题？ 面试官考察性能优化问题的目的可能并不是要你设计一个性能很高的系统，而是为了全方位考察一个面试者的知识背景和实践能力。 1) 性能优化涉及的知识面既需要深度，同时又需要一定的广度从深度上来说…...

编程日记 2024/5/11 21:46:19

php使用yield处理大数据文件

1.概述 yield和return有点像，它是一个生成器，对PHP应用的性能有非常大的影响， 只有在调用的时候才会执行，并不产生多余的值，比如读取一个很大的文件或者计算大量的数据时，如果直接读取很有可能内存就爆了&a…...

编程日记 2024/5/14 5:09:55

数据更新 | CnOpenData法拍房数据

法拍房数据一、数据简介法拍房，即“法院拍卖房产”，是被法院强制执行拍卖的房屋。当债务人（业主）无力履行借款合约或无法清偿债务时，而被债权人经司法程序向法院申请强制执行，将债务人名下房屋拍卖&…...

编程日记 2024/5/13 3:22:19

（一）kafka从入门到精通之初识kafka

一、发布订阅系统在学习kafka之前，我们先来看看什么是发布订阅系统。概念数据的发送者不会直接把消息发送给接收者，这是发布与订阅消息系统的一个特点。发布者以某种方式对消息进行分类，接受者订阅它们，以便接受特定类型的消…...

编程日记 2024/5/12 16:50:43

stata17中double类型与float类型的区别（变量的存储格式和显示格式、数值运算出错、转换数值格式、字符型数据转换为数值型数据）

double类型与float类型区别参考：变量的存储格式和显示格式数值运算出错因为营业总收入和其他业务收入都是字符型数据，所以使用real函数将其转换为数值型数据。 gen 主营业务收入 real(营业总收入)-real(其他业务收入)结果如下图所示：计…...

编程日记 2024/5/14 7:43:22

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表

左树右表是我们在业务管理系统中常见的业务形态，如下图所示，树形结构用于多层级的数据的展示，列表页作为对应数据的横向行级展现。实现树形的配置有两种模式，一种是根据树形字典配置（简单导入即可）&#x…...

编程日记 2024/5/19 18:28:15

Spring Boot实现Redis同数据源动态切换DB | Spring Cloud 31

一、前言在某些业务场景下，需要多访问同一Redis数据源下的不同DB。在Redis中默认提供了16个数据库（序号0-15），默认Redis使用的是db 0。此章节基于spring-boot-starter-data-redis模块，实现了Redis同数据源动态切换…...

编程日记 2024/5/18 0:52:06

[技术经理]02 什么是技术经理？

目录01什么是技术经理02总结01什么是技术经理什么是技术经理？ 我用一句话概括为：专业技术团队的管理者。技术经理，是一种管理职位，通常是在软件开发、互联网等科技公司或技术团队中担任。技术经理的职责，**是管理…...

编程日记 2024/5/17 6:58:06

油炸食品的最佳用油：米糠油

摘要：本文详细介绍了米糠油作为最佳油炸用油的各种特点，但更重要的是建议采用真空油炸方法，更能发挥米糠油的优势。油炸食品是我们日常生活中常见的美味，人们普遍的共识是“油炸食品虽然好吃，但不适合多吃”&#xff…...

编程日记 2024/5/20 21:05:43

【C++】queue和priority_queue的成员函数和非成员函数

目录 1. queue 1.1 queue的成员函数 1.1.1 构造函数 1.1.2 判空 1.1.3 大小 1.1.4 队头 1.1.5 队尾 1.1.6 入队 1.1.7 emplace 1.1.8 出队 1.1.9 交换 1.2 queue的非成员函数 1.2.1 关系运算符重载 1.2.2 交换 2. priority_queue 2.1 priority_queue的成员函数…...

编程日记 2024/5/20 20:40:52

韩长赋在第七届杭州全球企业家论坛开幕式上讲话

今天我们相聚在美丽的西子湖畔，隆重举办“第七届杭州全球企业家论坛暨中国消费品博览会”，旨在凝聚发展力量，共创合作未来。今年是全面贯彻落实党的二十大精神的开局之年，是全面建设社会主义现代化国家，加快建设农业强…...

编程日记 2024/5/20 21:05:41

webpack+nginx开启gzip压缩部署项目

首先在服务器安装nginx sudo apt update sudo apt install nginx 安装完毕后将前端项目打包 webpack.output.publicPath里配置资源基础路径资源打包出来就是/publicPath开头 1.http://www.xxx.com/ publicPath: / 2.http://www.xxx.com/web publicPath: /web/ 尾巴多加个/…...

编程日记 2024/5/14 7:10:47

coco 2017数据集类别提取并转换为yolo数据集

coco 2017数据集提取和转换本次分割的动物数据集 4G一. coco2017数据集结构标注文件解析二. 提取需要的类别重新封装成coco数据集（这里以动物类别为例）三. 转换为yolo 数据集本次分割的动物数据集 4G https://download.csdn.net/download/qq_26696715/8…...

编程日记 2024/5/12 18:00:30

jdk线程池技术

jdk线程池ThreadPoolExecutor的7个参数 public ThreadPoolExecutor(int corePoolSize,int maximumPoolSize,long keepAliveTime,TimeUnit unit,BlockingQueue<Runnable> workQueue,ThreadFactory threadFactory,RejectedExecutionHandler handler) {if (corePoolSize &l…...

编程日记 2024/5/20 22:41:35

keepalived+nginx 双机热备搭建

keepalivednginx 双机热备搭建一、准备工作1.1 准备两台centos7.91.2 nginx 与 keepalived软件双机安装1.3 ip分配1.4 修改主机名1.5 关闭selinux（双机执行）1.6 修改hosts（双机执行）二、安装keepalived2.1 执行一下命令安装keepa…...

编程日记 2024/5/9 12:04:28

【云原生】容器编排技术Docker Compose

为什么需要Docker ComposeDocker Compose介绍Docker Compose安装Docker Compose版本介绍Docker Compose基本命令介绍Docker Compose实战Docker Compose Yml文件介绍总结为什么需要Docker Compose Docker帮助我们解决服务的打包安装的问题，随着而来的问题就是服务过…...

编程日记 2024/5/15 12:02:17

String、StringBuilder、StringBuffer的四大区别解析

面试官问：String、StringBuilder、StringBuffer有什么区别么？ 这个问题是个高频问题，所以今天从源码上进行深度刨析他们的区别。如何回答： 从四个点出发： 1、可变/不可变类 String是不可变类。他被被final修饰&…...

编程日记 2024/5/20 22:41:33

【C#进阶】C# 匿名方法

序号系列文章18【C#进阶】C# 事件19【C#进阶】C# 集合类20【C#进阶】C# 泛型文章目录前言1、什么是匿名方法？2、delegate 运算符3、Lambda 表达式3.1、Lambda 表达式的自然类型3.2、Lambda 表达式的显示返回类型4、关于匿名方法的总结结语前言 📺 hello大…...

编程日记 2024/5/5 18:14:35

C++并发编程之二在线程间共享数据

文章目录1.1 互斥锁（mutex）保护共享数据1.1.1 std::mutex 的成员函数 std::mutex::lock() 和std::mutex::unlock() (不推荐使用)1.1.2 使用std::lock_guard保护共享数据1.1.3 使用std::unique_lock保护共享数据1.2 保护共享数据的其他方式1.2.1 初始化过…...

编程日记 2024/5/20 0:33:45

FL Studio和Cubase哪个容易一些 FL Studio和Cubase修音哪个好

FL Studio和Cubase哪个容易一些？FL Studio是很适合新手使用的宿主软件。FL Studio和Cubase修音哪个好？FL Studio和Cubase在修音方面各有千秋。一、FL Studio和Cubase哪个容易一些 FL Studio是很适合新手上手的宿主软件，这得益于FL Studio独…...

编程日记 2024/5/15 1:29:09

限定学校|在站博士后省公派新加坡国立大学从事博后研究

Y博士为国内在站博士后，我们向其推荐了人社部博管办国外博士后派出项目及所在省的相关项目，最终助其获得新加坡国立大学的博士后邀请函，鉴于该导师名列全球高被引科学家榜单，顺利获批省国际培养博士后资助项目，如期出国…...

编程日记 2024/5/20 21:17:05

信息技术最全总结（备考教资）

信息技术备考教资信息技术知识点总结，欢迎收藏！需要xmind和备考书籍的可以评论区留言。第一部分-学科专业知识第一章-信息技术基础知识信息与信息技术概述信息概述信息的定义信息本身不是实体信息是通过文字、数字、图像、图形、声音、视频等方…...

编程日记 2024/5/20 22:01:34

spring5（三）：IOC操作Bean管理（基于xml方式）

IOC操作Bean管理（基于xml方式）前言一、基于 xml 方式创建对象二、基于 xml 方式注入属性1. 使用 set 方法进行属性注入2. 使用有参数构造进行属性注入3. p 名称空间注入简化操作（了解）三、xml 注入其它类型属性1. 字面量2. 注入属…...

编程日记 2024/5/20 22:41:34

Vue的快速上手

一、创建一个 Vue 应用前提条件熟悉命令行已安装 16.0 或更高版本的 Node.js在本篇中，我们将介绍如何在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。确保你安装了最新版本的 Node.js&…...

编程日记 2024/5/3 11:24:13

通过ELK+kafka采集微服务日志

在springboot微服务中采集日志推送kafka背景整体流程图快速搭建kafkazk开发环境通过logback记录日志到kafka快速搭建ELK环境Kibana查看，统计日志背景在分布式的项目中，各功能模块产生的日志比较分散，同时为满足性能要求，同一个微…...

编程日记 2024/5/20 22:24:23

开启新航路，拓尔思发力AIGC市场 | 爱分析调研

2022年，随着AI聊天机器人GhatGPT在世界范围内持续火爆，极具创意、表现力、个性化且能快速迭代的AIGC技术成功破圈，成为全民讨论热点。 AIGC是指在确定主题下，由算法模型自动生成内容，包括单模态内容如文本、图像、音频…...

编程日记 2024/5/18 15:52:36

01-死磕QNX someip

1. vsomeip3.1.20版本环境配置 export COMMONAPI_CONFIG/etc/commonapi.ini export LD_LIBRARY_PATH/sdcard/someip:$LD_LIBRARY_PATH export VSOMEIP_CONFIGURATION/etc/vsomeip-service.json export VSOMEIP_APPLICATION_NAMEHelloWorldSomeIPService sysctl -w net.ine…...

编程日记 2024/5/20 21:05:44

$Y=Z_{M}[r]$

绑定 class

绑定对象

绑定数组

在组件上使用

绑定内联样式style

绑定对象

绑定数组

相关文章：