学会使用v-show来切换模板
P粉680087550
P粉680087550 2023-09-12 23:16:59
0
1
523

我正在尝试使用v-showv-if来切换模板的显示,如下面的代码所示。

我面临的问题是,尽管v-show不是一个懒惰的条件,但当我将showTemplate设置为false或true时,msg的内容始终显示。

请告诉我如何正确使用v-showv-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>
P粉680087550
P粉680087550

全部回复(1)
P粉344355715

你必须这样使用:

<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属性一起使用。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板