v-if为true为什么不显示,一直显示v-else的内容

RainLucky
  • 395

如题,代码构成大概如下,打印出来的show.value的值为true,但是就是页面只显示v-else的内容,不显示v-if的。我的头顶后好多问号????

<template>
<div id='a' v-if="show.value">aaaaaaa</div>
<div id='b' v-else>bbbbbbbbb</div>
</template>
<script>
...
setup(){
const show = ref(false);
setTimeout(()=>{
show.value=true;
},2000);
return {
   show
}
}
</script>
回复
阅读 1.6k
3 个回答
<template>
<div id='a' v-if="show">aaaaaaa</div>
<div id='b' v-else>bbbbbbbbb</div>
</template>
<script>
...
setup(){
const show = ref(false);
setTimeout(()=>{
show.value=true;
},2000);

return {show}
}
</script>

可能是因为setup()没有将变量show返回。

setup(){
const show = ref(false);
setTimeout(()=>{
show.value=true;
},2000);
return { show }
}

还有就是如果是通过ref创建的数据, 那么在template中使用的时候不用通过.value来获取,因为Vue会自动给我们添加.value。

setup函数申明的变量需要return出去, 模板才能访问到, 还有使用Ref申明的变量模板内部做了处理不用再.value去获取值

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏