v-if如何根据异步请求值显示隐藏

Question

如题，v-if要怎么实时更新？

<div v-if="show">
<script>
export default defineComponent({
const show = ref(false);
    setup(){
    
     setTimeout(function () {
     // nextTick(() => {
        show = true;
      //})
    }, 3000)
    }
})
</script>

Answer 1

这样写的不太对，是不是下面这样的

<template>
  <div>
    <div>v-if示例</div>
    <div v-if="show">123</div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from "vue";
export default {
  setup() {
    // 包装数据为响应对象，赋初始值为false
    const show = ref(false);

    setTimeout(() => {
      show.value = true;
    }, 3000);

    // 返回给其它选项（包括模板引用）使用
    return {
      show,
    };
  },
};
</script>

Answer 2

const show 应该在setup内部吧，而且ref使用时是使用value,也就是show.value

Answer 3

<div v-if="show">
<script>
export default defineComponent({
    const show = ref(false);
    setup(){
     setTimeout(function () {
       show.value = true;
     }, 3000)
      return { show }
    }
}) 
</script>