Vue 绑定class样式

1、字符串写法,适用于:样式的类名不确定,需要动态绑定

<div class="basic" :class="mood" @click="changeMood"></div>

data: {
   mood: 'normal'
}

2、数组写法, 适用于:要绑定的样式个数不确定,名字也不确定

<div class="basic" :class="classArr" @click="changeMood"></div>

data: {
   classArr: ['a', 'b', 'c']
}

3、对象写法,适用于:要绑定样式个数确定,名字也确定,但要动态决定用不用

<div class="basic" :class="classObj" @click="changeMood"></div>

data: {
   classObj: {
      a:false,
      b:true
   }
}

4、style样式

        :style="{fontSize: xxx}" 其中xxx是动态值

        :style="[a,b]"其中a,b是样式对象

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C# 图像旋转一定角度后,对应坐标怎么计算?

原理分析 要计算图像内坐标在旋转一定角度后的新坐标&#xff0c;可以使用二维空间中的点旋转公式。假设图像的中心点&#xff08;即旋转中心&#xff09;为 (Cx, Cy)&#xff0c;通常对于正方形图像而言&#xff0c;中心点坐标为 (Width / 2, Height / 2)。给定原坐标点 (X, …

10:HAL---高级定时器

前言&#xff1a; 高级定时器具有通用定时器的所有功能&#xff0c;我们在这里面只说它不一样的地方。&#xff08;通用定时器不具备的功能&#xff09; 一&#xff1a;高级定时器 1&#xff1a;介绍 2&#xff1a;重复计数器 在我们普通的定时器中当CNTCCR时直接发生溢出。然…

阿里二面凉了,难蹦。。。

分享一位同学阿里巴巴的后端面经&#xff0c;共有 2 面&#xff0c;第一面很顺利过了&#xff0c;可惜挂在第二面。 这两面的知识点范围&#xff0c;我帮大家罗列一下&#xff1a; 网络&#xff1a;TCP、HTTP mysql&#xff1a;索引应用、索引结构、隔离级别、最左匹配 redis…

图小灵的多线程

进程 简而言之,一个运行的程序就叫作进程 管理进程,要先将进程使用类/结构体,表示各个属性 为了后续增删改查,需要将进程通过数据结构串联起来 系统中有一个结构体专门用来表示进程的属性,叫作PCB(进程控制块) 一个进程使用一个或者多个PCB来表示 系统会使用类似于双向链…

pycharm-git 配置(1)

1.安装git2.pycharm 中配置git 插件 弹出Git版本号&#xff0c;即配置成功。3.创建本地仓库 VCS->VCS operations->create repository->设置本地目录 左下角可以看到git本地仓库git可以看到push,commit。 4.配置远方仓库&#xff0c;此时确保git上是有这个项目…

在开发板上运行spidev_test报错:“./spidev_test: line 2: h: not found”

问题 今天交叉编译spidev_test后&#xff0c;放到开发板上运行报错&#xff1a;“./spidev_test: line 2: h: not found” 原因 编译方式不同&#xff0c;生成的是64为程序&#xff0c;应该生成32位的程序。 解决办法&#xff1a; 修改为直接用命令编译&#xff0c;生成…

酷开科技抓住“客厅经济”发展的机遇,不断对酷开系统升级赋能

酷开科技抓住“客厅经济”发展的机遇&#xff0c;不断对酷开系统升级赋能&#xff0c;打造新的生活场景&#xff0c;满足消费者的不同生活需求&#xff0c;酷开科技的产品和服务让消费者能够在家庭空间中享受到更加智能、便捷和温馨的时光。同样凭借更加包容、开放的生态体验&a…

贪吃蛇项目实战——学习详解

前言:贪吃蛇是一个经典的游戏&#xff0c; 本节将使用c语言实现一个简易的的贪吃蛇小游戏。 本节内容适合已经学完c语言还有数据结构链表的友友们。 我们要实现的贪吃蛇是在控制台进行游戏的。 它运行起来是这样的&#xff1a; 贪吃蛇 那么&#xff0c; 为了实现这个小游戏。 我…

添加Redis缓存

1.缓存查询 在service层Impl文件中&#xff0c;进行查询时优先向Redis中查数据&#xff0c;查到就查到了&#xff0c;没有查到向mysql数据库中查&#xff0c;查到之后不先返回&#xff0c;而是先将数据存到数据库&#xff08;缓存&#xff09;,在再返回数据。 1.1 代码实现(缓…

鸿蒙端云一体化开发--调用云函数--适合小白体制

如何实现在端侧调用云函数&#xff1f; 观看前&#xff0c;友情提示&#xff1a; 不知道《如何一键创建端云一体化模板》的小白同学&#xff0c;请看&#xff1a; 鸿蒙端云一体化开发--开发云函数--适合小白体制-CSDN博客 实现方法&#xff1a; 第一步&#xff1a;添加依赖 …

98%的企业与被入侵的第三方有关联,如何有效的防止入侵

技术供应链漏洞使威胁参与者能够以最小的努力扩展其运营&#xff0c;在导致第三方入侵的外部B2B关系中&#xff0c;75%涉及软件或其他技术产品和服务&#xff0c;其余25%的第三方违规涉及非技术产品或服务。 入侵通常需要几个月或更长的时间才能公之于众&#xff0c;受害者可能…

【Leetcode】string类刷题

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;Leetcode刷题 目录 1.仅反转字母2.字符串中第一个唯一字符3.验证回文串4.字符串相加5.反转字符串I I6.反转字符串中的单词III7.字符串相乘8.把字符串转换为整数 1.仅反转字母 题目链接&#xff1a;…

C++:模板详解

模板详解 1.函数模板1.概念2.语法3.原理4.实例化1.隐式实例化2.显示实例化 5.匹配原则 2.类模板1.格式2.实例化 3.非类型模板参数注意点 4.特化1.概念2.函数模板特化1.前提2.语法说明3.示例 3.类模板特化1.全特化2.偏特化/半特化3.选择顺序 4.按需实例化 5.模板的分离编译1.分离…

开发一个农场小游戏需要多少钱

开发一个农场小游戏的费用因多个因素而异&#xff0c;包括但不限于游戏的规模、复杂性、功能需求、设计复杂度、开发团队的规模和经验&#xff0c;以及项目的时间周期等。因此&#xff0c;无法给出确切的费用数字。 具体来说&#xff0c;游戏的复杂程度和包含的功能特性数量会直…

巧用断点设置查找bug【debug】

默认设置的断点&#xff0c;当代码运行到断点处MCU就会被挂起&#xff0c;从而停在断点处。 但在某些情况下&#xff0c;如调试FCCU时&#xff0c;如果设置断点&#xff0c;MCU停下后将会导致 FCCU 配置WDG超时。或在调试类似电机控制类的应用时&#xff0c;不适当的断点会导 致…

镜舟科技荣获金科创新社 2024 年度金融数据智能解决方案奖

近日&#xff0c; 镜舟科技凭借领先的金融实时数仓构建智能经营解决方案&#xff0c;在“金科创新社第六届金融数据智能优秀解决方案评选”活动中&#xff0c;成功入选“数据治理与数据平台创新优秀解决方案”榜单。 金科创新社主办的“鑫智奖”评选活动&#xff0c;旨在展示…

详解IIC通信协议以及FPGA实现

一、IIC简介 IIC也称为I2C&#xff08;Inter-Integrated Circuit&#xff09;由飞利浦公司&#xff08;现在的恩智浦半导体&#xff09;开发&#xff0c;是一种用于短距离数字通信的串行&#xff0c;同步&#xff0c;半双工通信接口协议&#xff1b;传输在标准模式下可以达到10…

python:元组,字符串,切片

一、元组# 列表可以修改内容&#xff0c;元组可以不被修改 # 在程序内封装数据&#xff0c;不希望数据被篡改&#xff0c;所以使用元组 # 语法&#xff1a; 不限制类型 # 定于元组的字面量&#xff1a; &#xff08;元素&#xff0c;元素&#xff0c;元素.....&#xff09; # 定…

apipost、postman等工具上传图片测试flask、fastapi的文件api接口

参考&#xff1a;https://blog.csdn.net/qq_15821487/article/details/119354129 https://www.cnblogs.com/wyxjava/p/16076176.html 选择from-data&#xff0c;下拉选择file上传文件发送即可

线上真实案例之执行一段逻辑后报错Communications link failure

1.问题发现 在开发某个项目的一个定时任务计算经销商返利的功能时&#xff0c;有一个返利监测的调度&#xff0c;如果某一天返利计算调度失败了&#xff0c;需要重新计算&#xff0c;这个监测的调度就会重新计算某天的数据。 在UAT测试通过&#xff0c;发布生产后&#xff0c…
最新文章