VUE官网如下
我这里引入本地vue.js文件,也可以引入显示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/[email protected]/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>
白天模式如下图：
黑夜模式如下图：
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！