vue 3 组合 API,条件渲染

Posted

技术标签:

【中文标题】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>

&lt;script setup&gt; 标记自 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>

【讨论】:

以上是关于vue 3 组合 API,条件渲染的主要内容,如果未能解决你的问题,请参考以下文章

Vue 条件渲染,列表渲染,key的作用和原理,列表过滤,列表排序,Vue监测数据原理和注意事项

Vue.js:尽管有条件渲染,元素仍会显示片刻

03Vue 之列表渲染及条件渲染

vue 条件渲染指令

vue 条件渲染指令

前端框架Vue------>第一天学习 v-if