vue3 template中点击事件不生效

Question

• 想要click触发一个onPlay事件，改变isPlay，根据isPlay的true、false切换按钮样式，代码如下

<div class="btn" @click="onPlay">
  <div :class="isPlay ? 'pause-btn' : 'play-btn'">{{ isPlay }}</div>
</div>

  setup() {
    const isPlay = ref(false)
    const onPlay = () => {
      if (isPlay.value === false) {
        //  开始播放
        isPlay.value = true
      }
      else {
        //  暂停
        isPlay.value = false
      }
    }
    return {
      isPlay,
      onPlay,
    }
  }

• 但是点击不能改变isPlay

Answer 1

<div :class="[isPlay ? 'pause-btn' : 'play-btn']">{{ isPlay }}</div>