15 - 切换器

[Ly-TiR]

<script setup lang='ts'>
import {ref} from 'vue'
/**
 * Implement a composable function that toggles the state
 * Make the function work correctly
*/
function useToggle(show:boolean) {
  const state = ref<boolean>(show)

  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" :style="{color:state ? 'red' : '' }">
    Toggle state
  </p>
</template>