Vue动态绑定样式

        虽然经常使用动态绑定样式的方法,但有时候突然要用,一瞬间还是会有点困惑,决定记录一下,方便混乱的时候查阅。

绑定 HTML class

绑定对象

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

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

        也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧。

绑定数组

<div :class="[activeClass, errorClass]"></div>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<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>

绑定内联样式

绑定对象

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

绑定数组

<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/735120.shtml

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

相关文章

pycharm查看Tensor的完整数据

通常debug时&#xff0c;Tensor的数据呈现如下图&#xff0c;只显示开头几个值和结尾几个值&#xff0c;中间被省略&#xff1a; 解决方法&#xff1a; 右击想查看的数据&#xff0c;选择Evaluate Expression 输入如下命令&#xff0c;就会出现View as Array提示&#xff0c;…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:LoadingProgress)

用于显示加载动效的组件。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 LoadingProgress() 创建加载进展组件。 从API version 9开始&#xff0c;该接口支持在ArkTS卡片中使…

2024年k8s最新版本使用教程

2024年k8s最新版本使用教程 3. YAML语言入门3.1 基本语法规则3.2 支持的数据结构3.3 其他语法 4 资源管理4.1 k8s资源查询4.2 资源操作命令4.3 资源操作方式4.3.1 命令行方式4.3.2 YAML文件方式 5 Namespace5.1 查看命名空间5.2 创建命名空间5.3 删除命名空间5.4 命名空间资源限…

API接口商品竞品价格监控,品牌维权

第一步&#xff1a;确定监控目标 在开始之前&#xff0c;需要明确监控哪些竞品及其相关属性&#xff0c;如产品名称、SKU、价格、促销信息等。此外&#xff0c;设定监控频率和关键绩效指标&#xff08;KPIs&#xff09;&#xff0c;例如价格变动幅度、变动频率等&#xff0c;以…

脚本自动化 设置快捷方式并设置为管理员运行

自动化创建快捷方式并设置为始终以管理员权限运行&#xff0c;可以通过编写批处理脚本来实现。以下是一个创建.bat批处理文件快捷方式并设置为管理员运行的示例脚本&#xff1a; batch echo off set SCRIPT_PATH"C:\Scripts\myScript.bat" set SHORTCUT_PATH"%…

TenantLineHandler 在 MyBatis Plus 中处理多租户场景

TenantLineHandler 在 MyBatis Plus 中通常用于处理多租户场景。多租户是指在一个软件实例中&#xff0c;能够同时处理多个不同的租户数据&#xff0c;并且保证数据之间的隔离性。在多租户应用中&#xff0c;通常需要在 SQL 查询中加入额外的条件&#xff0c;以确保每个租户只能…

计算机组成原理之机器:输入输出系统

计算机组成原理之机器&#xff1a;输入输出系统 笔记来源&#xff1a;哈尔滨工业大学计算机组成原理&#xff08;哈工大刘宏伟&#xff09; Chater3&#xff1a;输入输出系统 3.1 输入输出系统的发展概况 早期阶段 外部设备与主机之间采用分散连接&#xff0c;即每一个设备都…

什么是微隔离技术?

微隔离产生的背景 首先来看下南北向流量以及东西向流量的含义 南北向流量 指通过网关进出数据中心的流量&#xff0c;在云计算数据中心&#xff0c;处于用户业务虚拟机&#xff08;容器&#xff09;跟外部网络之间的流量&#xff0c;一般来说防火墙等安全设备部署在数…

数组的访问2

1.数组的索引 数组的索引即数组的下标&#xff0c;使用下标查找到当前位置的数组中的值&#xff08;注意&#xff1a;数组下标是从0开始的&#xff09; public class ArrayDemo2 {public static void main(String[] args) {// 数组的索引int[] age {12,22,31};// 1.根据索引…

python控制语句-1.2

目录 循环结构 while循环 for循环 循环结构练习-1 循环嵌套 循环结构练习-2 循环控制语句&#xff08;continue & break&#xff09; 循环结构 while循环 语法 Python 编程中 while 语句用于循环执行程序&#xff0c;即在某条件下&#xff0c;循环执行某段程序&am…

Spring依赖注入的方式

目录 1. Setter注入 2. 构造器注入 3. 字段注入 4. 方法注入 5. 接口注入 6. Lookup注入 7. 注解注入 Spring框架提供了多种依赖注入&#xff08;DI&#xff09;的方式来管理对象之间的依赖关系。以下是Spring支持的依赖注入方式&#xff1a; 1. Setter注入 定义&…

ChatGPT4.0直接出图功能上线!神奇一键画,AI让创作更轻松(chatgpt4.0直接出圖)

ChatGPT4.0直接出图功能上线&#xff01;神奇一键画&#xff0c;AI让创作更轻松(chatgpt4.0直接出圖) ChatGPT4.0的核心功能 ChatGPT4.0是OpenAI发布的最新版本的ChatGPT&#xff0c;相较于之前的版本有许多新增的功能和特点。其中最显著的功能是新增了直接出图功能&#xff…

Python打印Linux系统中最常用的linux命令之示例

一、Linux中的~/.bash_history文件说明&#xff1a; 该文件保存了linux系统中运行过的命令的历史。使用该文件来获取命令的列表&#xff0c;并统计命令的执行次数。统计时&#xff0c;只统计命令的名称&#xff0c;以不同参数调用相同的命令也视为同一命令。 二、示例代码&am…

【C语言步行梯】分支语句if...else、switch详谈

&#x1f3af;每日努力一点点&#xff0c;技术进步看得见 &#x1f3e0;专栏介绍&#xff1a;【C语言步行梯】专栏用于介绍C语言相关内容&#xff0c;每篇文章将通过图片代码片段网络相关题目的方式编写&#xff0c;欢迎订阅~~ 文章目录 什么是语句&#xff1f;引入分支语句&am…

GPT的磁盘管理

GPT分区工具&#xff1a;gdisk gdisk gdisk分区 GPT 128个主分区 [rootzutuanxue ~]# gdisk -l /dev/sdc [rootzutuanxue ~]# gdisk -l /dev/sdc 查看sdc信息 GPT fdisk (gdisk) version 1.0.3 ​ Partition table scan:MBR: MBR onlyBSD: not presentAPM: not presentGPT…

Charles-抓包工具的使用

文章目录 Charles简介与安装Charles的简介Charles的安装Charles 安装证书 抓包在PC端抓取HTTPS请求在移动端进行抓包移动端配置Androd端配置iOS端配置 Charles使用小技巧&#xff1a; 模拟慢速网络 Charles简介与安装 Charles的简介 Charles 是在 PC 端常用的网络封包截取工具…

Android 开发过程中常见的内存泄漏场景分析

场景1 Static变量存储上下文环境Context public class ClassName {// 定义1个静态变量private static Context mContext;//... // 引用的是Activity的contextmContext context; // 当Activity需销毁时&#xff0c;由于mContext 静态 & 生命周期 应用程序的生命周期&…

数字化转型导师坚鹏:科技金融政策、案例及营销创新

科技金融政策、案例及营销创新 课程背景&#xff1a; 很多银行存在以下问题&#xff1a; 不清楚科技金融有哪些利好的政策&#xff1f; 不知道科技金融有哪些成功的案例&#xff1f; 不知道科技金融如何进行营销创新&#xff1f; 课程特色&#xff1a; 以案例的方式解…

【重温设计模式】迭代器模式及其Java示例

迭代器模式的介绍 在编程领域&#xff0c;迭代器模式是一种常见的设计模式&#xff0c;它提供了一种方法&#xff0c;使得我们可以顺序访问一个集合对象中的各个元素&#xff0c;而又无需暴露该对象的内部表示。你可以把它想象成一本书&#xff0c;你不需要知道这本书是怎么印…

VLC播放器快捷键大全(史诗级最全)

文章目录 前言 a.倍速播放 b.快进快退 c.播放暂停 d.音量调节 e.跳到指定时间 f.画幅比例 缩放 裁剪 全屏 g.状态栏显示 h.截屏 录制 i.打开 保存 截屏 转化 四、总结 前…