vue 组件开关 白天黑夜特效

你可以通过使用 Vue 组件来实现白天黑夜特效。具体来说，你可以在组件中设置一个 `isNight` 的状态，然后根据这个状态来动态地加载不同的 CSS 样式或者图片资源。比如：

<template>
  <div :class="{ 'night': isNight }">
    <img :src="isNight ? nightImage : dayImage" />
    <button @click="toggleNight">Toggle Night</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isNight: false,
      dayImage: 'path/to/day/image',
      nightImage: 'path/to/night/image'
    };
  },
  methods: {
    toggleNight() {
      this.isNight = !this.isNight;
    }
  }
};
</script>

<style>
.day {
  background-color: #fff;
  color: #333;
}

.night {
  background-color: #333;
  color: #fff;
}
</style>

在上面的代码中，我们通过 `isNight` 状态来控制组件的背景颜色和文字颜色。同时，我们还通过 `:src` 属性动态地加载不同的图片资源。当用户点击按钮时，我们会通过 `toggleNight` 方法来切换到白天或者黑夜模式。