Vue-13、Vue绑定css样式

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绑定css样式</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>.basic{width: 400px;height: 100px;border:1px solid black;}.normal{}.happy{}.sad{}</style>
</head>
<body>
<div id="root"><div class="basic" :class="mood" @click="changemood">{{name}}</div>
</div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data() {return {name:'test',mood:'normal'}},methods:{changemood(){const arr = ['happy','sad','normal'];const index = Math.floor(Math.random()*3);this.mood=index;}}})
</script>
</body>
</html>

2、绑定class样式–数组写法,适用于:要绑定的样式个数不确定、名字也不确定。
在这里插入图片描述
3、绑定class样式–对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用。
在这里插入图片描述

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

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

相关文章

上海市委网信办技术沙龙|美创科技分享数据流动下的安全应对

为有效提升上海市党政机关和重点单位的技术能力与水平&#xff0c;1月11日&#xff0c;上海市委网信办组织开展以“数据安全治理与合规流动经验分享”为主题的第三十二期网络安全技术沙龙。全市26家党政机关和重点单位相关网络安全技术人员参加此次活动。 美创科技作为上海市委…

关于git删除仓库中原本应该忽略的文件的研究

开门见山&#xff0c;先抛出一个结论&#xff1a; 任何被提交到远程仓库中的数据&#xff0c;都不能被彻底删除&#xff0c;只要提交上去了&#xff0c;就会永远留存。 任何被提交到远程仓库中的数据&#xff0c;都不能被彻底删除&#xff0c;只要提交上去了&#xff0c;就会…

三、04 nginx负载均衡

目录 简介1、准备三台主机且都安装了ngix2、先配置第一个服务主机配置文件nginx.conf制作页面写入页面内容检测语法&重启nginx查看第一个服务器再用同样样的方法 搭建第一个web 服务即可可以使用scp 直接复制 第一个web 服务器的文件配置文件第二个页面的 html 代码 配置代…

分别取出一个时间序列中的年份,月份和日期

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 只留下时间序列中 各行元素的年、月或日 结果的数据类型是序列 Series.dt.year Series.dt.month Series.dt.day [太阳]选择题 以下关于代码输出结果的说法中正确的是? import pandas as pd ts…

“超人练习法”系列09:耶克斯–多德森定律

01 你现有水平和学习风格 搞明白自己是个大事&#xff0c;搞不明白就糊涂一辈子。 首先&#xff0c;要弄清楚自己现在是个啥水平&#xff0c;有啥技能可以拿出来的&#xff0c;然后再定个目标&#xff0c;知道自己想往哪方面努力。 你擅长的学习方式是啥呢&#xff1f;是那种…

第十五届蓝桥杯单片机组备赛——独立键盘矩阵键盘

文章目录 一、按键原理二、独立键盘&矩阵键盘2.1 独立按键2.2 矩阵键盘 一、按键原理 原理很简单&#xff0c;当我们没有按下SW2时&#xff0c;由于上拉电阻得作用&#xff0c;使得输入引脚得信号为高电平&#xff0c;当按下按键后&#xff0c;引脚直接接地&#xff0c;输入…

虹科分享 | PCAN工具:强大的CAN通讯解决方案,你了解多少?

导读&#xff1a;在当今的汽车和工业自动化领域&#xff0c;可靠的通讯系统至关重要&#xff0c;PCAN工具为这些应用提供了强大的支持。本文将介绍PCAN工具的功能、应用和优势&#xff0c;以帮助您根据实际需求选择合适的工具和配件。 PCAN 网络允许 PCAN 应用程序&#xff08…

redis原理(二)数据结构

redis可以存储键与5种不同数据结构类型之间的映射&#xff1a; String类型的底层实现只有一种数据结构&#xff0c;也就是动态字符串。而List、Hash、Set、ZSet都由两种底层数据结构实现。通常我们把这四种类型称为集合类型&#xff0c;它们的特点是一个键对应了一个集合的数据…

【MATLAB】【数字信号处理】产生系统的单位冲激响应h(t)与H(z)零极点分布

一、实验目的与要求 产生h(t) 与H(z) 零极点分布 二、实验仪器 微机&#xff0c;仿真软件MATLAB 2022a 三、实验内容与测试结果 1.已知描述连续系统的微分方程为y(t)5y(t)6y(t)2x(t)8x(t) &#xff0c;计算系统的单位冲激响应h(t) 程序如下&#xff1a; clear all; ts0;…

JavaScript采集各大电商平台关于预制菜酸菜鱼销售量

因为我喜欢吃酸菜鱼&#xff0c;但是自己弄又弄不来&#xff0c;想从网上找找看看&#xff0c;但是种类多&#xff0c;自己逐个选择又太浪费时间。索性利用自己专业爬虫知识&#xff0c;一边检验我最近代码水平&#xff0c;另一方面还能选择到满意的年货。过去写个各大平台预制…

centos7 arm服务器编译安装gcc 8.2

前言 当前电脑的gcc版本为4.8.5&#xff0c;但是在编译其他依赖包的时候&#xff0c;出现各种奇怪的问题&#xff0c;会莫名其妙的中断编译。本地文章讲解如何自编译安装gcc&#xff0c;替换系统自带的gcc。 环境准备 gcc 需要 8.2&#xff1a;下载地址 开始编译 1、解压gcc…

医疗器械网络安全风险评定CVSS打分

为了完成医疗器械软件的网络安全风险评定相关文档&#xff0c;需要进行CVSS评分&#xff0c;这个评分对于第一次做的人来说感觉还是有些迷惑的&#xff0c;查了一些资料&#xff0c;留作参考。 CVSS 指的是 Common Vulnerability Scoring System&#xff0c;即通用漏洞评分系统…

QLExpress和Groovy对比

原理 Groovy groovy基于JVM运行。 编译时&#xff1a;将源文件编译成class文件后&#xff0c;用java的classLoader加载&#xff1b;运行时&#xff1a;直接用groovy classLoader加载 QLExpress QLExpress将文本解析成AST&#xff0c;用java对象表达后执行。 特点 Groo…

C++命名空间的using声明

在前边的C讲解中&#xff0c;使用输入输出流cin和cout前要加std::&#xff0c;每次前边都要加就会很麻烦。解决这个问题&#xff0c;我们就要了解一下命名空间和using声明。  命名空间会限定作用域具体格式及使用参照C入门讲解命名空间&#xff0c;上边的cin和cout就是声明在s…

大屏项目:react中实现3d效果的环形图包括指引线

参考链接3d环形图 3d效果的环形图 项目需求实现方式指引线&#xff08;线的样式字体颜色&#xff09; 项目需求 需要在大屏上实现一个3d的环形图&#xff0c;并且自带指引线&#xff0c;指引线的颜色和每段数据的颜色一样&#xff0c;文本内容变成白色&#xff0c;数字内容变…

最值得推荐的10个免费PDF转Word的方法

PDF转Word是一项很常见的操作&#xff0c;将PDF文件转换为Word文档可以方便我们对文件进行编辑和修改&#xff0c;而且Word格式也更加好打印。 最值得推荐的10个免费PDF转Word的方法 PDF 文件格式在很多场合都被广泛使用&#xff0c;但有时候我们需要修改 PDF 文件内容并保存&…

抖店入驻+运营全方位指导,开店篇!无货源/有货源统统适用

我是王路飞。 关于抖店的入驻和运营教程&#xff0c;准备出一个比较详细、系统的全方位指导内容&#xff0c;感兴趣的可以持续关注下。 不管你做的是无货源还是有货源模式&#xff0c;核心思路都是一样的&#xff0c;统统适用。 这篇文章&#xff0c;先给你们分享下抖店的入…

LLM之RAG实战(十五)| RAG的自动源引文验证技术

​ 在过去的一年里&#xff0c;检索增强生成&#xff08;RAG&#xff09;已经成为一种基于LLM的流行架构&#xff0c;旨在解决在基于知识的LLM最常见的挑战之一&#xff0c;可怕的幻觉。 一、RAG如何解决幻觉&#xff1f; RAG Pipeline包括两个关键组件&#xff1a;&…

Java零基础教学文档servlet(1)

【Web开发和HTTP协议】 1. Web开发概述 1.1 web概述 万维网&#xff08;英语&#xff1a;World Wide Web&#xff09;亦作WWW、Web、全球广域网&#xff0c;是一个透过互联网访问的&#xff0c;由许多互相链接的超文本组成的信息系统。英国科学家蒂姆伯纳斯-李于1989年发明了…

类脑研究之脑组成及神经系统相关理论!大脑是什么?大脑和脑有什么区别?大脑皮层和脑膜什么关系?人的神经系统有哪些?

目录 1 引言2 神经系统3 脑组成3.1 大脑成分3.2 大脑外部&#xff1a;脑膜3.3 大脑中部&#xff1a;大脑皮层3.4 大脑内部3.5 脑干3.6 小脑 1 引言 为了深入研究类脑&#xff0c;必须了解大脑的结构和机制。从神经系统分级和脑组成两个角度出发&#xff0c;详细介绍了大脑的生…