學會使用v-show來切換模板

Question

我正在嘗試使用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>

Answer 1

你必須這樣使用：

<template>
  // v-show或v-if都可以
  <div v-show="showTemplate" 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>

因為v-if或v-show不能與template屬性一起使用。