<div v-if="show" ref="div">显示了</div>
<el-button @click="setShow" >设置</el-button>
setShow(){
this.show = true;
console.log(this.$refs.div);
},
打印出是undefined。
原因:
dom渲染是异步的,需要一定时间,当打印 console.log(this.$refs.div)时,div还没渲染出,所以打印出undefinde。
解决方法:
1.将打印语句放在this.nextTick中;
2.将v-if改为v-show;
注:
v-show本质就是标签display设置为none,控制隐藏;
v-if是动态的向DOM树内添加或者删除DOM元素
<div v-show="show" ref="div">显示了</div>
<el-button @click="setShow" >设置</el-button>