Vue16-绑定class样式

news2024/11/15 17:57:08

一、vue绑定class样式

1-1、需求一:字符串写法

vue实现class样式绑定

1-2、需求二

点击div,随机切换样式。

math.random():随机数的范围[0, 1)

 

1-3、需求三:数组写法

样式的追加

 

1-4、需求四 :对象写法

二、vue绑定style样式

2-1、字符串格式

 

2-2、对象格式

注意:

所有对象里面的key都不能瞎写!!! 得已存在

 

2-3、数组格式

或者:

三、小结

注意:

样式对象的key不能瞎写,要是存在的CSS属性!驼峰式!

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

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

相关文章

浅解Reids持久化

Reids持久化 RDB redis的存储方式: rdb文件都是二进制,很小,里面存的是数据 实现方式 redis-cli链接到redis服务端 使用save命令 注:不推荐 因为save命令是直接写到磁盘里面,速度特别慢,一般都是redis…

MySQl基础----Linux下搭建mysql软件及登录和基本使用(附实操图超简单一看就会)

绪论​ 涓滴之水可磨损大石,不是由于他力量强大,而是由于昼夜不舍地滴坠。 只有勤奋不懈地努力,才能够获得那些技巧。 ——贝多芬。新开MySQL篇章,本章非常基础包括如何在Linux上搭建(当然上面的SQL语句你在其他能执行…

UnityXR Interaction Toolkit 如何使用XRHand手部识别

前言 Unity的XR Interaction Toolkit是一个强大的框架,允许开发者快速构建沉浸式的VR和AR体验。随着虚拟现实技术的发展,手部追踪成为了提升用户交互体验的关键技术之一。 本文将介绍如何在Unity中使用XR Interaction Toolkit实现手部识别功能。 准备工作 在开始之前,请…

Chat-TTS:windows本地部署实践【有手就行】

最近Chat-TTS模型很火,生成的语音以假乱真,几乎听不出AI的味道。我自己在本地部署玩了一下,记录一下其中遇到的问题。 环境: 系统:windows 11 GPU: Nvidia 4060 Cuda:12.1(建议安…

后方碰撞预警系统技术规范(简化版)

后方碰撞预警系统技术规范(简化版) 1 系统概述2 预警区域3 预警目标4 功能需求功能条件5 显示需求6 指标需求1 系统概述 后方碰撞预警系统RCW(Rear Collision Warning)是在后方车辆即将与自车发生碰撞之前,激活危险警告灯以较高频率闪烁,从而吸引后方驾驶员的注意力,避免…

PG 数据库常用参数调整

1.shard_buffers Postgresql使用自己的缓冲区,也使用操作系统缓冲区。这意味着数据存储在内存中两次,首先是 Postgresql缓冲区,然后是操作系统缓冲区。 与其他数据库不同, Postgresql不提供直接IO。这称为双缓冲(就是磁盘中的时候读的时候先放在数据库的缓冲区&am…

【Python教程】3-控制流、循环结构与简单字符串操作

在整理自己的笔记的时候发现了当年学习python时候整理的笔记,稍微整理一下,分享出来,方便记录和查看吧。个人觉得如果想简单了解一名语言或者技术,最简单的方式就是通过菜鸟教程去学习一下。今后会从python开始重新更新&#xff0…

Vue17-条件渲染

一、使用v-show属性做条件渲染 控制元素的显示和隐藏 v-show里面也能是表达式,只要表达式的值是boolean就行。 或者 当时结构还在: 二、使用v-if属性做条件渲染 结构也不在了 三、示例 方式一: 方式二: 当元素有很高的切换频率&am…

【web本地存储】storage事件,StorageEvent对象介绍

storage事件 Web Storage API 内建了一套事件通知机制,当存储区域的内容发生改变(包括增加、修改、删除数据)时,就会自动触发storage事件,并把它发送给所有感兴趣的监听者,因此,如果需要跟踪存…

第十二届蓝桥杯单片机国赛练习代码

文章目录 前言一、问题重述二、主函数总结 前言 第十五蓝桥杯国赛落幕已有十天,是时候总结一下,这个专栏也将结束。虽然并没有取得预期的结果,但故事结尾并不总是美满的。下面是赛前练习的第十二届国赛的代码。 一、问题重述 二、主函数 完整…

万向节锁死(Gimbal Lock)

Gimbal Lock是一个常见的3D动画问题,主要由旋转顺序引起的。我来详细解释一下它的成因: 在三维空间中,任何旋转都可以分解为绕X,Y,Z三个轴的欧拉旋转(Euler Rotation)。每个轴的旋转是按照一定顺序进行的,比如XYZ或ZYX等。 理论上,通过这三个旋转值的组合,可以达到任意的空间…

MATLAB实现磷虾算法(Krill herd algorithm)

1.算法介绍 磷虾算法(Krill Herd Algorithm, KH)是一种基于生物启发的优化算法,其原理模拟了南极磷虾(Euphausia superba)群体的聚集行为。该算法旨在通过模拟磷虾个体间的相互作用、觅食行为和随机扩散,来…

设计模式 —— 观察者模式

设计模式 —— 观察者模式 什么是观察者模式观察者模式定义观察者模式的角色观察者模式的使用场景观察者模式的实现 被观察者(Subject)观察者(Observer)通知(notify)更新显示(update&#xff09…

Webpack 从入门到精通-基础篇

一、webpack 简介 1.1 webpack 是什么 webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析,打包生成对应的…

MYSQL六、存储引擎的认识

一、存储引擎 1、MySQL体系结构 连接层:最上层是一些客户端和链接服务,包含本地sock 通信和大多数基于客户端/服务端工具实现的类似于TCP/IP的通信。主要完成一些类似于连接处理、授权认证、及相关的安全方案。在该层上引入了线程池的概念,为…

Open vSwitch 数据包接收的实现

一、Open vSwitch 数据包的来源 Open vSwitch 中的数据包有许多种来源: 物理网络接口:OVS 可以连接到物理网络设备,并处理从这些设备收到的数据包。这些数据包可能来自外部网络,需要被转发或进一步处理。虚拟网络接口&#xff1a…

MySQL 常见客户端程序

本篇主要介绍MySQL常见的客户端程序 目录 一、mysqlcheck 二、mysqldump 三、mysqladmin 四、mysqldumpslow 五、mysqlbinlog 六、mysqlshow 显示列的具体信息​编辑 七、mysqlslap 一、mysqlcheck mysqlcheck是MySQL的表维护程序,其功能主要包含以下四个方…

遗传算法笔记:基本工作流程

1 介绍 遗传算法有5个主要任务,直到找到最终的解决方案 2 举例 2.1 问题描述 比如我们有 5 个变量和约束,其中 X1、X2、X3、X4 和 X5 是非负整数且小于 10(0、1、2、4、5、6、7、8、9)我们希望找到 X1、X2、X3、X4 和 X5 的最…

01 Linux网络设置

目录 1.1 查看及测试网络 1.1.1 查看网络配置 1. 查看网络接口地址 1. 查看活动的网络接口设备 2. 查看指定的网络接口信息 2. 查看主机名称 3. 查看路由表条目 4. 查看网络连接情况 1.1.2 测试网络连接 1. 测试网络连通性 2. 跟踪数据包的路由途径 3. 测试DNS域名解析 1.2 设…

Apache ShardingSphere实战与核心源码剖析

Apache ShardingSphere实战与核心源码剖析 1.数据库架构演变与分库分表介绍 1.1 海量数据存储问题及解决方案 如今随着互联网的发展,数据的量级也是成指数的增长,从GB到TB到PB。对数据的各种操作也是愈加的困难,传统的关系性数据库已经无法满足快速查询与插入数据的需求。…