Vue双向数据绑定实现网页主题切换

在做自己博客项目的过程中,制作入口页时,既喜欢白色的渐变背景,又喜欢黑色养眼的感觉,索性,决定给背景添加一个切换的按钮.

代码如下：

<!--
 * @Author: devilwzx
 * @Date: 2022-04-17 10:11:01
 * @LastEditors: devilwzx
 * @LastEditTime: 2022-04-17 10:11:01
 * @FilePath: \Php-Vue\vue\src\componnets\AboutMe\AboutMe.vue
 * @Description: 
 * 
 * @My website: devilwzx.top
 * Copyright (c) 2022 by devilwzx, All Rights Reserved. 
-->
<template>
     <!--这一行是重点,这里通过 : 绑定了class属性,
     然后呢,就可以通过按钮的触发方法,来改变className的值
     让他是等于dark还是white,这样,就可以来引用不同的css文件了--> 
  <div :class="className">
    <div id= "Entrance">
        <button @click="changeStyle()">改变颜色</button>
        {{className=="white"?"开灯":"关灯"}}
      <div class="square">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="circle">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        className:"white"
    };
  },
  methods:{
      changeStyle(){
          this.className=="white"
          ?(this.className="dark")
          :(this.className="white")
      }
  }
};
</script>
<style>
/* 引用主css样式 */
@import "../../CSS/Entrance.css";
/* 引入主题 */
@import "../../CSS/dark.css";
@import "../../CSS/white.css";

</style>

---

• v-bind 绑定属性,它的简写是 :

• 这里是vue.js对绑定属性官方说明

• 自己理解,所谓绑定属性,是指把属性的值绑定给return里的数据,通过改变数据的值就可以改变属性啦！

• 苦思冥想切换主题的方法,其实只要简单的绑定一个属性就可以了,由此感觉到了vue基础的薄弱,所以在做博客的过程中慢慢学习吧,官方的文档中提到了绑定属性数组的,可以通过它来增加切换多个颜色主题.

---

本文章使用limfx的vscode插件快速发布