我正在尝试使用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="欢迎使用Vue.js应用程序"/> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> <script setup> </script>
你必须这样使用:
因为v-if或v-show不能与
template
属性一起使用。