vue 3 组合 API，条件渲染

【问题标题】：vue 3 composition API, conditional renderingvue 3 组合 API，条件渲染
【发布时间】：2022-01-18 16:12:03
【问题描述】：

我有一个按钮需要在单击时更改其图标，以便在播放和暂停之间切换。

这是一个简约的代码示例：

<template>

    <div @click="toggleF">
        <i v-if="toggleForce == true" class="fas fa-pause"></i>
        <i v-if="toggleForce == false" class="fas fa-play"></i>
    </div>

</template>

<script>
    import {onMounted, onBeforeMount, ref} from 'vue'

    export default {
        setup(){
            const toggleForce = ref(false)

            function toggleF () {
               toggleForce.value = !toggleForce.value
            };

        return {toggleF,toggleForce}
        }
    }
</script>

我收到以下警告/错误：

【问题讨论】：

您使用的是哪个版本的 Vue？我在 Vue3 的早期版本中遇到了类似的问题
你可以用这样的方式简化类：:class="['fas', toggleForce ? 'fa-pause' : 'fa-play']"

标签： vue.js vuejs3 vue-composition-api

【解决方案1】：

请尝试以下代码：

演示1

<template>
  <div @click="toggleForce = !toggleForce">
    <i v-if="toggleForce" class="fas fa-pause" />
    <i v-else class="fas fa-play" />
   </div>
</template>

<script setup>
import {ref} from 'vue'

const toggleForce = ref(false)
</script>

<script setup> 标记自 vue version 3.2 起可用，它将帮助您清理脚本区域

演示2

const { ref, createApp } = Vue

createApp({
  setup() {
    const toggleForce = ref(false)

    const toggleF = () => {
      toggleForce.value = !toggleForce.value
    }

    return {
      toggleForce, 
      toggleF
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <button @click="toggleF">toggleForce
    <div v-if="toggleForce == true" class="fas fa-pause">TRUE</div>
    <div v-if="toggleForce == false" class="fas fa-play">FALSE</div>
  </button>
</div>

【讨论】：