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

【问题标题】：How to change a button when clicked in Vue JS and Tailwind CSS在 Vue JS 和 Tailwind CSS 中单击时如何更改按钮
【发布时间】：2022-01-11 19:21:00
【问题描述】：

我正在尝试进行暗模式按钮切换，我想做的第一步是一个图标，当我单击按钮时会发生变化，但我的代码没有运行。这是我的代码：

<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>

【问题讨论】：

运行此程序时是否收到错误消息？如果是这样，请将其发布在您的问题中。此外，更好的方法是创建一个名为 imgSrc 的计算属性，如果 isDark 为 true，则返回一个 url，如果为 false，则返回另一个，然后在您的模板中，只有一个标记，如下所示：

标签： vue.js vuejs3 tailwind-css vue-composition-api

【解决方案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" >

【讨论】：