webfansplz / vuejs-challenges

Collection of Vue.js challenges
https://vuejs-challenges.netlify.app/
MIT License
2.71k stars 187 forks source link

15 - 切换器 #2787

Open deamaruNote opened 2 months ago

deamaruNote commented 2 months ago
<script setup lang='ts'>
import { ref } from 'vue';
/**
 * 实现一个切换状态的可组合函数
 * 确保该功能正常工作
*/
function useToggle() {
      const state = ref(bool);
      const toggle = () => {
         state.value =  !state.value;
     };
    return [state, toggle]
}

const [state, toggle] = useToggle(false)

</script>

<template>
  <p>State: {{ state ? 'ON' : 'OFF' }}</p>
  <p @click="toggle">
    Toggle state
  </p>
</template>