vue3-类与样式绑定

Class 与 Style 绑定

  1. class 和 style 都是 attribute,我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。

  2. Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组。

绑定class

  1. :class (v-bind:class 的缩写) 传递一个对象来动态切换 class

  2. class 指令也可以和一般的 class 属性 共存。

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

<script lang="ts" setup>
import { ref } from "vue"const isActive = ref(true)
const hasError = ref(false)const classObject = reactive({active: true,'text-danger': false
})</script><template><div class="container"><div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div><!-- 输出为 --><!-- <div class="static active"></div> --><div :class="classObject"></div><!-- 输出为 --><!-- <div class="active"></div> --></div>
</template><style lang="scss" scoped>
.container {}
</style>

绑定数组

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

  1. 直接绑定数组

  2. 数组中使用三元表达式

  3. 数组中嵌套对象(看着简洁)

<script lang="ts" setup>
import { ref } from "vue"const isActive = ref(true)const activeClass = ref('active')
const errorClass = ref('text-danger')
</script><template><div class="container"><!-- 直接绑定一个类名 --><div :class="activeClass"></div><!-- 在数组中可以传入多个类名 --><div :class="[activeClass, errorClass]"></div><!-- 渲染结果 --><!-- <div class="active text-danger">111</div> --><!-- 三元表达式 --><div :class="[isActive ? activeClass : '', errorClass]">222</div><!-- 数组中嵌套对象 --><div :class="[{ active: isActive }, errorClass]">333</div></div>
</template><style lang="scss" scoped>
.container {}
</style>

在组件上使用

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

  • 组件模版

<!-- 子组件模板 -->
<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 }" /><p class="foo bar active">Hi!</p>

绑定内联样式

绑定对象

  1. :style 支持绑定 JavaScript 对象值,对应的是 HTML 元素的 style 属性:

const activeColor = ref('red')
const fontSize = ref(30)<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  1. 尽管推荐使用 camelCase,但 :style 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称),例如:

<div :style="{ 'font-size': fontSize + 'px' }"></div>
  1. 直接绑定一个样式对象通常是一个好主意,这样可以使模板更加简洁

const styleObject = reactive({color: 'red',fontSize: '13px'
})<div :style="styleObject"></div>

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

绑定数组

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

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

自动前缀

当你在 :style 中使用了需要浏览器特殊前缀的 CSS 属性时,Vue 会自动为他们加上相应的前缀。Vue 是在运行时检查该属性是否支持在当前浏览器中使用。如果浏览器不支持某个属性,那么将尝试加上各个浏览器特殊前缀,以找到哪一个是被支持的。

样式多值 你可以对一个样式属性提供多个 (不同前缀的) 值,举例来说:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

数组仅会渲染浏览器支持的最后一个值。在这个示例中,在支持不需要特别前缀的浏览器中都会渲染为 display: flex。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/623369.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工智能基础知识总结--朴素贝叶斯

什么是朴素贝叶斯 朴素贝叶斯是基于贝叶斯定理与特征条件独立假设的分类方法。 给定训练集 T = ( x 1 , y 1 ) , ( x 2 , y 2 ) ,

Python 点云处理总目录

一、点云滤波 原始点云包含过多噪点和冗余点&#xff0c;滤波和采样往往是点云预处理的必要步骤 1.滤波 直通滤波 统计滤波 半径滤波 2.采样 下采样抽稀 二、邻近搜索 如何组织点云快速获取当前点邻域范围&#xff0c;是面对海量点云保证处理速度的重要前提 3.KD树与八…

linux如何创建文件教程分享

在Linux中创建文件通常通过使用命令行完成。这里有几种不同的方法来创建一个新文件&#xff1a; 1. 使用 touch 命令 touch 命令是最简单的创建空文件的方式。这个命令将更新文件的访问和修改时间戳。如果指定的文件不存在&#xff0c;它将创建一个空文件。 touch newfile.t…

Python实现读取超100G的数据文件

前言 本文是该专栏的第42篇,后面会持续分享python的各种干货知识,值得关注。 在项目工作中,难免会遇到需要你通过python去读取100G甚至超过100G的数据文件。对于小数据的文件来说,相信很多同学都可以轻松解决。但对于大数据文件,类似读取100G的数据文件甚至会对电脑的性能…

实战指南:如何在Spring Boot中无缝整合Dubbo【四】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 实战指南&#xff1a;如何在Spring Boot中无缝整合Dubbo【四】 前言项目结构主项目(作为主pom)接口服务提供者properties文件实现类 服务消费者properties接口层 实现效果图 前言 微服务架构已经成为…

BUUCTFMisc (我flag呢???)

刚好&#xff0c;更完密码学&#xff0c;然后就到下一个对新手还算 “友好” 的地方了--->Misc&#xff08;但他还是比密码学难&#xff09; 找不出flag belike &#xff1a; 看了别人的找法以后be like&#xff1a; 这里我就来讲几道我觉得比较有意思的题目吧&…

python 字符串的详细处理方法

当前版本&#xff1a; Python 3.8.4 简介 字符串是由字符组成的序列&#xff0c;可以用单引号、双引号或三引号&#xff08;单引号或双引号的连续使用&#xff09;括起来。一般用来表示和处理文本信息&#xff0c;可以是字母、数字、标点符号以及其他特殊字符&#xff0c;用于…

CAN/CANFD数据记录仪汽车电子售后神器

CAN数据记录仪是一种用于采集和存储CAN总线数据的工具&#xff0c;广泛应用于汽车、轨道车辆、工业控制等大数据量且不易排查故障的系统中。它可以实时存储总线上的数据&#xff0c;方便后续的研究和分析。解决工程师售后难点。 在选择CAN数据记录仪时&#xff0c;需要根据实…

JavaScript基础05

1 - 作用域 1.1 作用域概述 通常来说&#xff0c;一段程序代码中所用到的名字并不总是有效和可用的&#xff0c;而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性&#xff0c;增强了程序的可靠性&#xff0c;减少了名字冲突。 Ja…

结构化数据,非结构化数据,半结构化数据(AI问答)

结构化数据&#xff0c;非结构化数据&#xff0c;半结构化数据&#xff0c;请介绍一下 结构化数据、非结构化数据和半结构化数据是按照数据组织形式和复杂度进行区分的三大类型&#xff1a; 结构化数据&#xff1a; 结构化数据是指具有固定格式和预定义模式的数据&#xff0c;…

春节回家前,请一定给你的电脑装上KKView远程控制软件

马上春节了&#xff0c;电脑不能带回家&#xff0c;有时候要处理点意外的事情&#xff0c;怎么办&#xff1f;只要走之前&#xff0c;给你电脑装上KKView远程控制软件&#xff0c;就可以随时随地用手机或电脑控制你的工作电脑&#xff0c;远程办公、传文件、看摄像头都没问题。…

Spring全局异常处理

目录 概述依赖导入创建全局异常处理总结 概述 在Spring框架中&#xff0c;全局异常处理主要是通过ControllerAdvice&#xff08;或其特化形式RestControllerAdvice&#xff09;注解和ExceptionHandler注解来实现的。这种机制能够捕捉到控制器&#xff08;Controller或RestCont…

2024.1.15每日一题

LeetCode 82.删除排序链表中的重复元素 II 82. 删除排序链表中的重复元素 II - 力扣&#xff08;LeetCode&#xff09; 题目描述 给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0c;只留下不同的数字 。返回 已排序的链表 。 示例…

常用Java代码-Java中的Optional类和null安全编程

在Java中&#xff0c;Optional 是一个可以为null的容器对象。如果值存在则isPresent()方法返回true。调用get()方法会返回值&#xff0c;如果值为null则抛出NullPointerException。以下是一个详细的代码详解。 在之前的Java版本中&#xff0c;程序员需要手动检查是否为null&am…

docker安装部署Elasticsearch(ES)以及相关配置

Elasticsearch简介 mysql用作持久化存储&#xff0c;ES用作检索 基本概念&#xff1a;index库>type表>document文档 index索引&#xff08;相当于MySQL的数据库&#xff09; 动词&#xff1a;相当于mysql的insert 名词&#xff1a;相当于mysql的db Type类型&#xff…

Jenkins-自动化

定时构建 使用Cron表达式指定执行时间。 # 格式 # ┌──分&#xff08;0 - 59&#xff09; # │ ┌──时&#xff08;0 - 23&#xff09; # │ │ ┌──日&#xff08;1 - 31&#xff09; # │ │ │ ┌─月&#xff08;1 - 12&#xff09; # │ │ │ │ ┌─星期&#…

这本书没有一个公式,却讲透了数学的本质!

《数学的雨伞下&#xff1a;理解世界的乐趣》。一本足以刷新观念的好书&#xff0c;从超市到对数再到相对论&#xff0c;娓娓道来。对于思维空间也给出了一个更容易理解的角度。 作者&#xff1a;米卡埃尔•洛奈 原文完整版PDF&#xff1a;https://pan.quark.cn/s/019bf19c4981…

2024--Django平台开发-Redis持久化、主从复制、哨兵(十)

before Redis基础&#xff1a; Redis的安装&#xff1a;Windows平台、centos7 Windows平台不推荐安装&#xff0c;但是开发阶段&#xff0c;测试使用还是可以的&#xff0c;推荐使用centos等其他Linux平台&#xff0c;因为将来项目部署也要放到Linux云服务器上。 Redis的通用…

电子学会C/C++编程等级考试2023年09月(六级)真题解析

C/C++编程(1~8级)全部真题・点这里 第1题:生日相同 在一个有180人的大班级中,存在两个人生日相同的概率非常大,现给出每个学生的名字,出生月日。试找出所有生日相同的学生。 时间限制:1000 内存限制:65536 输入 第一行为整数n,表示有n个学生,n ≤ 180。此后每行包含一…

PL/1语言 :上古伟大的操作系统IBM System/3603的开发编程语言

PL/I (Programming Language One&#xff0c;发音为/pi /I w / n/&#xff0c;有时也写为PL/1)[1]是最初由IBM开发的一种过程式、命令式的计算机编程语言。它是为科学、工程、商业和系统编程而设计的。自20世纪60年代引入以来&#xff0c;它一直被学术、商业和工业组织不断使用…