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>
<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>
【讨论】:
以上是关于vue 3 组合 API,条件渲染的主要内容,如果未能解决你的问题,请参考以下文章