v-if and v-show 的坑 -- 图片预览

最新推荐文章于 2025-07-06 22:36:32 发布

原创最新推荐文章于 2025-07-06 22:36:32 发布 · 942 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#自身开发中遇到的问题 #小白

本文深入探讨了在Vue.js项目中使用v-if与v-show指令进行DOM元素控制时的区别，特别是在图片预览功能实现上。通过实例讲解了v-if可能导致上传功能失效的原因，并给出了改用v-show的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-if and v-show 的坑 – 图片预览

小白记录自己在日常开发中遇到的问题

v-if

v-if是动态的向DOM树内添加或者删除 DOM元素；删除后该元素将不存在DOM树内

v-show

v-show是通过设置DOM元素的 display 样式属性控制显隐；相当于给元素添加 display 属性，根据 v-show 的布尔值来控制 display 属性的值

项目开发时遇到的坑

在这里插入图片描述
当上传图片时需要有图片预览效果。
我的方法是在文件域绑定一个change事件进行监听。把当前元素传到方法中获取图片地址并在另一个元素上展示，并在展示时改变图片状态。

而大坑是获取到图片地址之后，文件就无法传到后台了。当时以为是获取图片地址后改变了文件本身。后来想用别的图片代替文件域的上传才发现，是因为 v-if 将元素节点删除了才导致无法上传图片！之后改成v-show后就可以上传了

下面贴上代码：


// 浏览器上预览本地图片或视频
getObjectURL(file) {  
var url = null ;   
 // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
 if (window.createObjectURL!=undefined) { // basic  
     url = window.createObjectURL(file) ;  
 } else if (window.URL!=undefined) { // mozilla(firefox)  
     url = window.URL.createObjectURL(file) ;  
 } else if (window.webkitURL!=undefined) { // webkit or chrome  
     url = window.webkitURL.createObjectURL(file);
 }
 return url ;  
},
changeimage (event) {
    // 调用上面的方法
 var objurl = this.getObjectURL(event.target.files[0])
 console.log(objurl)
 $('#myimg').attr('src',objurl);
 this.imgStat = false;
},

<div class="my_IDCard_header" v-show="imgStat && imgStat2">
	<img src="../images/icon/add.png" v-show="imgStat" class="my_IDCard_header_img" alt="">
	<input type="file" name="picfile" @change="changeimage($event)" ref="img" class="my_IDCard_header_input">
</div>
<div v-show="!imgStat" style="background: none;" class="my_IDCard_header">
	<img src="" id="myimg" style="width: 100%;height: 100%;border-radius:5px;" alt="">
</div>