vue 3 组合 API，条件渲染

Posted 2023-03-16

【中文标题】vue 3 组合 API，条件渲染

【英文标题】：vue 3 composition API, conditional rendering

【发布时间】：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']"

【参考方案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>