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

【vue】Vue中class样式的动态绑定

简介:Vueclass样式的绑定

1、字符串写法

使用场景:样式的类型不确定

写法:

<div :class="xd_bg">测试账号</div>

手动触发样式改变

注意:字符串使用的是vue实例data中已有的属性

2、对象写法

使用场景:样式个数、类名确定,通过Bollean动态展示与否

写法:

对象写在内联样式

<div :class="{bg_red:bg_red,border:border}">测试</div>

对象写在data中

<div :class="list">测试</div>
data: {
list: {bg_red: 'bg_red',border: 'border',},
}

3、数组写法

使用场景:需要绑定的样式个数不确定,类名也不确定

写法:

内联写法

<div :class="[xd_border,xd_bg]">测试</div>

数组里加三元运算符

<div :class="[isActive?xd_border:'',xd_bg]">测试</div>

写在data中

<div :class="list">⼩滴课堂</div>
data:{list:['border', 'bg_red']
}

相关文章:

【vue】Vue中class样式的动态绑定

简介&#xff1a;Vue中class样式的绑定 1、字符串写法 使用场景&#xff1a;样式的类型不确定 写法&#xff1a; <div :class"xd_bg">测试账号</div> 手动触发样式改变 注意&#xff1a;字符串使用的是vue实例data中已有的属性 2、对象写法 使…...

机器学习深度学习——随机梯度下降算法(及其优化)

在我们没有办法得到解析解的时候&#xff0c;我们可以用过梯度下降来进行优化&#xff0c;这种方法几乎可以所有深度学习模型。 关于优化的东西&#xff0c;我自己曾经研究过智能排班算法和优化&#xff0c;所以关于如何找局部最小值&#xff0c;以及如何跳出局部最小值的一些基…...

【MTK平台】【wpa_supplicant】关于wpa_supplicant_8/src/p2p/p2p.c文件的介绍

本文主要介绍external/wpa_supplicant_8/src/p2p/p2p.c文件 先看下p2p_find 这个方法 P2P_find 主要用于 P2P&#xff08;点对点&#xff09;网络中查找其他对等方的功能。另外可以看到设置P2P模块的状态为 P2P_SEARCH int p2p_find(struct p2p_data *p2p, unsigned int tim…...

华为数通HCIP-流量过滤与转发路径控制

流量控制 分类&#xff1a;流量过滤、流量转发路径控制&#xff1b; 特点&#xff1a;1、作用于数据层面/转发层面&#xff1b; 2、不会影响路由表&#xff0c;针对转发流量生效&#xff1b; 实现步骤&#xff1a; 1、通过流量匹配工具匹配流量&#xff08;ACL…...

SpringBoot中定时任务开启多线程避免多任务堵塞

场景 SpringBoot中定时任务与异步定时任务的实现&#xff1a; SpringBoot中定时任务与异步定时任务的实现_霸道流氓气质的博客-CSDN博客 使用SpringBoot原生方式实现定时任务&#xff0c;已经开启多线程支持&#xff0c;以上是方式之一。 除此之外还可通过如下方式。 为什…...

回归预测 | MATLAB实现SO-CNN-BiLSTM蛇群算法优化卷积双向长短期记忆神经网络多输入单输出回归预测

回归预测 | MATLAB实现SO-CNN-BiLSTM蛇群算法优化卷积双向长短期记忆神经网络多输入单输出回归预测 目录 回归预测 | MATLAB实现SO-CNN-BiLSTM蛇群算法优化卷积双向长短期记忆神经网络多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 Matlab实…...

入侵检测——IDS概述、签名技术

1. 什么是IDS&#xff1f; IDS&#xff08;intrusion detection system&#xff09;入侵检测系统&#xff0c;是一种对网络传输进行即时监视&#xff0c;在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备。它会对系统的运行状态进行监视&#xff0c;发现各种攻击企…...

golang 标准库json Marshal 序列化与反序列化

标准库代码 func Marshal(v any) ([]byte, error) {e : newEncodeState()defer encodeStatePool.Put(e)err : e.marshal(v, encOpts{escapeHTML: true})if err ! nil {return nil, err}buf : append([]byte(nil), e.Bytes()...)return buf, nil }func Unmarshal(data []byte, …...

【【51单片机AD/DA的分析】】

51单片机AD/DA的分析 看似单片机实验&#xff0c;其实是要学好数电 模数转换 与 数模转换 运算放大器 DA的转换就是利用运算放大器实现的 输出电压v0-(D7~D0)/256 x (VrefxRfb)/R D7~D0 就是我们控制的按键看输入多少 然后再划分256份 Vref是我们设置的一个基准电压 PWM 这种…...

在docker中安装使用达梦数据库

关于在docker中安装达梦数据库&#xff0c;达梦官方网站其实是有提供安装使用方法的&#xff0c;但可能还是有朋友不会&#xff0c;这里将在原文基础上简单扩充下。 注意&#xff1a;docker容器中&#xff0c;数据库安装后没有创建服务的脚本&#xff0c;只有bin、bin2、conf、…...

Leetcode-每日一题【剑指 Offer II 010. 和为 k 的子数组】

题目 给定一个整数数组和一个整数 k &#xff0c;请找到该数组中和为 k 的连续子数组的个数。 示例 1&#xff1a; 输入:nums [1,1,1], k 2输出: 2解释: 此题 [1,1] 与 [1,1] 为两种不同的情况 示例 2&#xff1a; 输入:nums [1,2,3], k 3输出: 2 提示: 1 < nums.leng…...

【JavaScript】使用Promise来处理异步调用,方法传入参数为接口,并回调接口的方法

例如我们在下面这个方法传入一个接口&#xff0c;并将方法的执行过程用传入的接口进行回调 connect() {wx.connectSocket({url: this.url,success: () > {console.log(WebSocket 连接创建成功);},fail: (err) > {console.error(WebSocket 连接创建失败, err);}});wx.onS…...

grid map学习笔记1之Ubuntu18.04+ROS-melodic编译安装grid_map栅格地图及示例运行

文章目录 0 引言1 安装依赖和编译1.1 安装依赖1.2 下载编译 2 运行示例2.1 simple_demo2.2 tutorial_demo2.3 iterators_demo2.4 image_to_gridmap_demo2.5 grid_map_to_image_demo2.6 opencv_demo2.7 resolution_change_demo2.8 filters_demo2.9 interpolation_demo 0 引言 苏…...

postgres wal2json插件jsonb字段数据丢失问题解决

使用pgwal2jsondebezium进行数据同步时&#xff0c;发现偶尔会有jsonb字段数据丢失的问题 进行测试时发现&#xff1a; 1、发生数据丢失的jsonb字段长度都比较大(超过toast阈值&#xff0c;使用toast表存储) 2、针对发生jsonb字段丢失的数据&#xff0c;jsonb字段本身未发生修…...

华为eNSP:路由引入

一、拓扑图 二、路由器的配置 1、配置路由器的IP AR1&#xff1a; [Huawei]int g0/0/0 [Huawei-GigabitEthernet0/0/0]ip add 1.1.1.1 24 [Huawei-GigabitEthernet0/0/0]qu AR2&#xff1a; [Huawei]int g0/0/0 [Huawei-GigabitEthernet0/0/0]ip add 1.1.1.2 24 [Huaw…...

Retrospectives on the Embodied AI Workshop(嵌入式人工智能研讨会回顾) 论文阅读

论文信息 题目&#xff1a;Retrospectives on the Embodied AI Workshop 作者&#xff1a;Matt Deitke, Dhruv Batra, Yonatan Bisk 来源&#xff1a;arXiv 论文地址&#xff1a;https://arxiv.org/pdf/2210.06849 Abstract 我们的分析重点关注 CVPR Embodied AI Workshop 上…...

「JVM」Full GC和Minor GC、Major GC

Full GC和Minor GC、Major GC 一、Full GC1、什么是Full GC?2、什么情况下会触发full gc&#xff1f; 二、Minor GC1、什么是Minor GC&#xff1f;2、什么情况下会触发Minor GC&#xff1f; 三、Major GC1、什么是Major GC&#xff1f;2、什么情况下会触发Major GC&#xff1f…...

Asp.Net MVC 使用Log4Net

Asp.Net MVC 使用Log4Net 在 ASP.NET MVC 中使用 Log4net 需要进行一些配置和代码集成。下面是在 ASP.NET MVC 中使用 Log4net 的步骤&#xff1a; 1. 安装 Log4net NuGet 包 打开 NuGet 包管理器控制台&#xff0c;并运行以下命令来安装 Log4net&#xff1a; Install-Pack…...

[元带你学: eMMC协议 29] eMMC 断电通知(PON) | 手机平板电脑断电通知

依JEDEC eMMC及经验辛苦整理,原创保护,禁止转载。 专栏 《元带你学:eMMC协议》 内容摘要 全文 2000 字, 主要内容 前言 断电通知是什么? 断电通知过程...

vue使用recorder-core.js实现录音功能

下载组件 npm install recorder-core封装方法 record.ts //必须引入的核心 import Recorder from recorder-core;//引入mp3格式支持文件&#xff1b;如果需要多个格式支持&#xff0c;把这些格式的编码引擎js文件放到后面统统引入进来即可 import recorder-core/src/engine/…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...