我正试图切换使用v-show
或v-if
模板的存在,如下面发布的代码所示。
我面临的问题是,尽管v-show
不是一个懒惰的条件,当我设置showTemplate
为false或true时,msg
的内容总是显示
请让我知道如何正确使用v-show
和v-if
helloWorld:
<template v-show="showTemplate">
<div class="hello">
{{msg}}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<script setup>
import { ref } from 'vue'
let showTemplate = ref(true)
showTemplate.value=false
</script>
应用:
template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<script setup>
</script>
2条答案
按热度按时间jecbmhm31#
你必须这样使用:
导致v-if或v-show不适用于
template
属性。xdnvmnnf2#
试试下面的代码段: