this_.$refs控制显示隐藏

通过使用Vue的v-if和v-show指令可以实现元素的显示和隐藏。v-if是通过控制DOM节点的显示或隐藏来实现的，当条件不满足时，DOM节点不会生成，此时通过this.$refs来获取DOM节点会返回undefined。而v-show是通过控制CSS的display属性来实现元素的显示或隐藏，DOM节点会一直存在，只是通过修改CSS属性来改变元素的显示状态。因此，使用v-show时，this.$refs可以成功获取到DOM节点。

所以，如果你想要通过this.$refs来控制元素的显示隐藏，可以考虑使用v-show指令。如果使用v-if指令，在获取DOM节点时需要注意条件是否满足，否则可能会返回undefined。 <span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [v-if下的元素 $refs失效](https://blog.csdn.net/m0_61004873/article/details/124330415)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [Vue 解决通过this.$refs来获取DOM或者组件报错问题](https://download.csdn.net/download/weixin_38649315/12924679)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [出现$refs.xxxRef未定义的原因及解决办法](https://blog.csdn.net/weixin_45637845/article/details/130581740)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]