vue3 template中点击事件不生效

• Z时代
• 2024-03-06
• 分类：IT

• 想要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

回答：

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

以上是 vue3 template中点击事件不生效 的全部内容， 来源链接： utcz.com/p/936203.html