对于v-for动态生成的元素,巧用v-if v-else实现有数据和没数据两种不同的显示效果

代码:

<div class="videos" v-for="(item,index) in currentVideos" :key="index">
        <!-- <iframe :src="item.src" width="100%" height="100%" allowfullscreen></iframe> -->
        注意:应在v-for所循环的每个元素设置v-if和v-else来取决采用哪种样式
        <div class="videoContent" v-if="item.src!=''"></div>
        <div class="noVideo" v-else>
          <div class="noVideoIcon"></div>
        </div>
</div>

效果:
在这里插入图片描述

发布了21 篇原创文章 · 获赞 0 · 访问量 385

猜你喜欢

转载自blog.csdn.net/qq_41800649/article/details/103319095