Vue2转Vue3渲染问题(图片不能显示)
在模拟Tab栏切换时,Vue2下图片可正常显示,换成Vue3图片显示不了,部分源码如下(Vue3的实现已被我注释):
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@3.0.0"></script> -->
<div id="tab">
<div class="tab-tit">
<a href="javascript:;" @click="curId = 0" :class="{'cur': curId === 0}">女装</a>
<a href="javascript:;" @click="curId = 1" :class="{'cur': curId === 1}">鞋子</a>
<a href="javascript:;" @click="curId = 2" :class="{'cur': curId === 2}">包包</a>
<a href="javascript:;" @click="curId = 3" :class="{'cur': curId === 3}">男装</a>
</div>
<div class="tab-con">
<div v-show="curId === 0">
<img src="01.jpg" alt="" width="100%">
</div>
<div v-show="curId === 1">
<img src="02.jpg" alt="" width="100%">
</div>
<div v-show="curId === 2">
<img src="01.jpg" alt="" width="100%">
</div>
<div v-show="curId === 3">
<img src="02.jpg" alt="" width="100%">
</div>
</div>
</div>
const vm = new Vue({
el: '#tab',
data: {
curId: 0
}
})
/* const vm = Vue.createApp({
data() {
return {
curId: 0
}
}
}).mount('#tab'); */
在Chrome中查看Elements发现Vue3下渲染的结果(片段)如下:
...
<div style>
<img src="02.jpg" alt= width="0">
</div>
...
Vue3下将<img>
渲染为width=0
(原始模板里为width="100%"
),从而导致图片显示不出来。
请问,如何解决此类问题?谢谢
推荐文章: