【VUE复习·7】样式绑定:静态样式绑定、动态样式绑定(明亮模式 / 暗黑模式 切换的效果如何实现)

news2024/11/16 22:56:04

总览

1.静态样式绑定
2.动态样式绑定

一、静态样式绑定

1.正常写即可
<div>
	<div class="basic" @click="changeName">
		{{name}}
	</div>
</div>

<style>
	.basic{
		...
	}
</style>

二、动态样式绑定

1.示例

这么写,就能够通过比如说我可以写一个函数,让我点击一个button或其他东西的时候,调用此函数,直接更改 data 中 a 的值,让 a 的值从 “normal” 变为 “happy”。然而奇妙的是,normal 和 happy 正是两个 CSS 的 class 样式的名字。

也就是说,我能够实现“明亮模式 / 暗黑模式” 一键切换的效果了!

在这里插入图片描述

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

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

相关文章

K8s Kubelet 垃圾回收机制

前言 Kubelet 垃圾回收(Garbage Collection)是一个非常有用的功能,它负责自动清理节点上的无用镜像和容器。Kubelet 每隔 1 分钟进行一次容器清理,每隔 5 分钟进行一次镜像清理(截止到 v1.15 版本,垃圾回收间隔时间还都是在源码中固化的,不可自定义配置)。如果节点上已…

2023经典好用的图床网站推荐(站长必备)

图床一般是指储存图片的服务器&#xff0c;有国内和国外之分&#xff0c;国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和cdn加速三种。同时允许你把图片对外连接的网上空间&#xff0c;图床有免费的&#xff0c;也有收费的。…

成都瀚网科技:抖音上线地方方言自动翻译功能

为了让很多方言的地域历史、文化、习俗能够以短视频的形式生产、传播和保存&#xff0c;解决方言难以被更多用户阅读和理解的问题&#xff0c;平台正式上线推出当地方言自动翻译功能。创作者可以利用该功能&#xff0c;将多个方言视频“一键”转换为普通话字幕供大众观看。 具体…

NOSQL Redis Ubuntu系列 常用的配置 及密码登录

查看Ubuntu 版本 uname -a 配置redis.conf 查看redis 是否安装成功 ps -ef | grep redis 查看redis 服务状态 service redis status 查看redis 默认安装的路径 whereis redis #sudo vim /etc/redis.conf redis 密码登录

程序员发展应该尽早明白13个道理(计算机专业的一定要看!)

1、一定要确定自己的发展方向&#xff0c;并为此目的制定可行的计划。不要说什么&#xff0c;“我刚毕业&#xff0c;还不知道将来可能做什么&#xff1f;”&#xff0c;“跟着感觉走&#xff0c;先做做看”。因为&#xff0c;这样的观点会通过你的潜意识去暗示你的行为无所事事…

Qt扫盲-QSqlField 理论总结

QSqlField 理论总结 一、QSqlField 类概述二、QSqlField 使用三、QSqlRecord类概述四、QSqlRecord的使用 一、QSqlField 类概述 QSqlField 表示数据库表 或 视图中单个列的特征&#xff0c;说白了就是数据库记录里的数据字段。如数据类型和列名。字段还包含数据库列的值&#…

vue.draggable拖拽,项目中三个表格互相拖拽的实例操作,前端分页等更多小技巧~

vue.draggable中文文档 - itxst.com官网在这里&#xff0c;感兴趣的小伙伴可以看看。 NPM或yarn安装方式 yarn add vuedraggable npm i -S vuedraggable UMD浏览器直接引用JS方式 <script src"https://www.itxst.com/package/vue/vue.min.js"></script&…

什么是超声波清洗机?工作原理是什么?2023年超声波清洗机推荐

超声波清洗机的优点可真是太多了&#xff01;&#xff01;&#xff01;比如超声波清洗的效果很不错&#xff0c;清洁度也很高&#xff0c;清洗速度快&#xff0c;不需要用手去接触清洗液&#xff0c;对于深孔&#xff0c;细缝&#xff0c;工件暗区也能清洗干净&#xff0c;清洗…

企业怎样选择适合的服务器租用?

随着互联网技术的发展&#xff0c;如何选择企业需要的服务器租用来满足需求是很多企业目前在考虑的问题&#xff0c;今天就让小编来给大家讲一讲吧&#xff01; 确定好服务器的规模和用途。企业首先根据自身的业务情况选择服务器的数量和规模还有性能&#xff0c;小型企业可以…

Echarts 自适应不生效解决(CPK分析工具直方图为例)

示例代码为左上方的CPK分析直方图组件 <template><div ref="cpk" id="cpk" style="height: 300px; width: 100%"></div> </template><script> import * as echarts from "echarts"; import { deboun…

【多线程初阶】多线程案例之定时器

文章目录 前言1. 什么是定时器2. 标准库中的定时器3. 自己实现一个定时器总结 前言 本文主要给大家讲解多线程的一个重要案例 — 定时器. 关注收藏, 开始学习吧&#x1f9d0; 1. 什么是定时器 定时器也是软件开发中的一个重要组件 类似于一个 “闹钟”. 达到一个设定的时间之…

Figma中文插件,让设计工作事半功倍的6大神器

Figma 凭借强大的设计功能和出色的协同体验&#xff0c;成为当前最受欢迎的 UI 设计工具之一。其插件生态为设计师提供了更多实用功能和可能性&#xff0c;大幅提高工作效率。即时设计在原型、交互、设计、协作等方面与 Figma 旗鼓相当&#xff0c;但更考虑本土设计师的实际需求…

数字孪生与GIS:优化公共交通的未来

数字孪生结合地理信息系统&#xff08;GIS&#xff09;在公共交通领域具有潜在的重大贡献&#xff0c;这种结合可以帮助城市更高效地规划、运营和改进公共交通系统。以下是一些关键方面的讨论&#xff0c;以说明数字孪生和GIS在这一领域的作用&#xff1a; 数字孪生技术的兴起…

【计算机网络】 基于TCP的简单通讯(服务端)

文章目录 流程伪代码代码实现加载库创建套接字绑定ip地址和端口号监听接受连接收发数据关闭套接字、卸载库 流程伪代码 //1、加载库——WSAStartup()//2、创建套接字——socket()//3、绑定ip和端口号——bind()//4、监听——listen()while(true){//5、接受连接——accept()whi…

kkplayer用户手册

本软件不使用任何敏感权限都可拒绝。所有资源均来自互联网&#xff0c;本软件仅供学习参考使用。 有任何问题可先尝试重装最新版 1.青少年模式 2.搜索方法 3.单个添加视频源 4.批量添加视频源 5.无法播放,无法全屏 6.DLNA投屏 7.隐私权限问题 8.数据备份和分享 9.关于广告 1. …

线程池解析

文章目录 1、平时使用哪些线程池&#xff0c;线程池默认的参数有哪些2、线程池的7个参数3、线程池状态①、线程池各个状态切换图&#xff1a; 4、线程池的使用5、线程池的好处6、线程池的整个流程7、Java的线程池说说①、线程池概念②、线程池的创建③、任务执行④、四种拒绝策…

005:根据股票代码和起始日期获取K线数据

我们改进《001》中的部分&#xff0c;因为他他没法在可视化界面输入信息&#xff0c;这样太麻烦。我们设法在可视化界面输入股票代码和起始日期&#xff0c;这样可以灵活得多。这部分&#xff0c;我们仍旧只获取日K线的数据。 import tkinter as tk from tkinter import messa…

Final Draft 12.0.9(简单好用的剧本写作工具)

Final Draft 12是一款专为编剧打造的强大写作工具&#xff0c;它将您的创意转化为精彩剧本的过程变得简单而高效。以下是推荐Final Draft 12的一些理由&#xff1a; 界面设计&#xff1a;Final Draft 12采用了简洁直观的界面设计&#xff0c;使得用户可以专注于创作&#xff0…

C语言的学习快速入门

可以按照以下步骤进行&#xff1a; 了解基本概念和语法&#xff1a;C语言是一种结构化的编程语言&#xff0c;了解基本的语法规则对于入门非常重要。可以学习关键字、变量、数据类型、运算符、控制结构等基本概念。学习编程环境&#xff1a;选择合适的编程环境&#xff0c;例如…

在linux下预览markdown的方法,转换成html和pdf

背景 markdown是一种便于编写和版本控制的格式&#xff0c;但却不便于预览——特别是包含表格等复杂内容时&#xff0c;单纯的语法高亮是远远不够的——这样就不能边预览边调整内容&#xff0c;需要找到一种预览方法。 思路 linux下有个工具&#xff0c;叫pandoc&#xff0c…