如何在 Vue JS 和 Tailwind 中单击时更改按钮 CSS

Question

我正在尝试进行深色模式按钮切换，我想要做的第一步是单击按钮时会更改的图标，但我的代码不是运行。那是我的代码：

<button href="" class="px-2 mb-1" @click="isDark = !isDark">
        <img src="../Assets/Icons/moon.svg" alt="" class="w-6 h-5 hidden lg:flex md:flex" v-if="isDark = true">
        <img src="../Assets/Icons/sun.svg" alt="" class="w-6 h-5 hidden lg:flex md:flex" v-if="isDark = false">
        </button>
<script>
export default {
  setup(){
    const showSidebar = ref(false)
    const stayInDropdown = ref(true)
    const isDark = ref(true)
    return{
      showSidebar,
      stayInDropdown,
      isDark,
    }
  },
</script>

Answer 1

v-if="isDark = true" 表示将 true 分配给 isDark 而不比较它们，比较应该像 v-if="isDark === true" 但你可以只做 v-if='isDark':

 <img v-if='isDark' src="../Assets/Icons/moon.svg" alt="" class="w-6 h-5 hidden lg:flex md:flex" >
 <img v-else src="../Assets/Icons/sun.svg" alt="" class="w-6 h-5 hidden lg:flex md:flex" >

如何在 Vue JS 和 Tailwind 中单击时更改按钮 CSS

How to change a button when clicked in Vue JS and Tailwind CSS

vue.js

tailwind-css

vuejs3

vue-composition-api