将此 javascript 转换为 Vue 3

Question

你好，我正在尝试将暗模式添加到我的项目中，我正在按照教程进行操作，但它似乎是一个 javascript 教程，而不是 vue 教程，这部分代码不起作用，想知道是否有人可以帮助我将它转换为 vue 3。如果有帮助，这就是教程 link。非常感谢https://javascript.plainenglish.io/how-to-add-dark-mode-to-your-next-js-project-using-tailwind-css-3d460a768d1c

    <button onClick={() > setDarkMode(!darkMode)}>
      {darkMode ? (
        <SunIcon size="4rem" />
      ) : (
        <MoonIcon size="4rem" />
      )}
    </button>

Answer 1

看不到你提供的页面，我直接转码

<button @click="darkmode=!darkmode"> 
 <MoonIcon v-if="darkmode" size="4rem" />
 <SunIcon v-else size="4rem" />
</button>

如果您正在使用 组合 api:

setup(){
   const darkmode = ref(false)

   return {darkmode}
}

如果是选项api:

data(){
   return {
      darkmode: false
   }
}

将此 javascript 转换为 Vue 3

convert this javascript to Vue 3

javascript

tailwind-css

vuejs3

darkmode