前端vue点击切换(黑夜/白天模式)主题最新(源码)

源码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>index</title></head>
<style>.bloack {width: 100%;height: 500px;background-color: #000;transition: 0.3s ease;}.white {width: 100%;height: 500px;background-color: aliceblue !important;transition: 0.3s ease;}.btn {width: 200px;height: 200px;background-color: beige;}
</style><body><div id="app"><div :class="isShow?'bloack':'white'"><div class="btn" @click="check">1</div></div></div>
</body><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="./js/vue.js"></script>
<script>var app = new Vue({el: "#app",data() {return {isShow: localStorage.getItem("theme") === "true" ? true : false,};},mounted() {console.log(this.isShow);},methods: {check() {if (this.isShow) {this.isShow = false;localStorage.setItem("theme", false);} else {this.isShow = true;localStorage.setItem("theme", true);}},},});
</script>
</html>

白天模式如下图：

黑夜模式如下图：

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！

前端vue点击切换(黑夜/白天模式)主题最新(源码)相关推荐

网页点击切换黑白昼夜模式
网页点击切换黑白昼夜模式并且刷新也不会恢复到初始模式点击后会在body加一个class属性自己写css代码就行了 HTML <input id="darkButton&quo ...
设置Eclipse可以Debug模式调试JDK源码，并显示局部变量的值
最近突然萌发了研究JDK源码的想法,所以就想到了在自己常用的Eclipse上可以调试JDK源码. 整个设置过程也很简单: 首先你要安装好JDK(我的JDK安装路径根目录是D:\Java\jdk-8u9 ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
java计算机毕业设计vue健康餐饮管理系统设计与实现（附源码、数据库）
java计算机毕业设计vue健康餐饮管理系统设计与实现(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ ...
html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
【014】基于Vue.js的移动端购物商城网站(含源码、课设报告)
文章目录一.项目介绍二.代码及报告获取一.项目介绍基于Vue.js的移动端购物商城网站(含源码.课设报告),代码获取放在文末了,码字不易,感谢点赞~ 一.系统概述本部分主要是对项目进行简要描 ...
java计算机毕业设计vue图书档案管理系统MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue图书档案管理系统MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue图书档案管理系统MyBatis+系统+LW文档+源码+调试部署本源码技术栈: ...
Vue 彩色头像|一个有趣的头像生成器附源码
前言这是一款矢量风格的头像生成器,您可以搭配不同的素材组件,生成属于您自己的个性化头像. 介绍您可能感兴趣的功能: 可视化组件配置栏随机生成头像重做/撤消国际化批量生成多个头像在线体验 ...
java计算机毕业设计vue健身食谱系统MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue健身食谱系统MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue健身食谱系统MyBatis+系统+LW文档+源码+调试部署本源码技术栈: 项目架构 ...
智慧党建云平台小程序 v2.4.9+前端（公众号+小程序一体）开源版源码下载安装教程
智慧党建云平台(vlinke_fdcparty)v2.4.9小程序功能模块,源码带最新微信小程序前端,小程序主程序后端,播播资源网小编测试前后端正常使用!分享的版本是最新标准版模块,模块是目前比官方低 ...

前端vue点击切换(黑夜/白天模式)主题最新(源码)

目录

源码

白天模式如下图：

黑夜模式如下图：

前端vue点击切换(黑夜/白天模式)主题最新(源码)相关推荐

最新文章

热门文章