javascript - vue循环出的span之间没有间距而直接写的span之间有间距，这是为什么？

问题描述

问 题

<div id="app">
    <span v-for="item in items">{{ item }}</span>
    <span>ttt</span>
    <span>sss</span>
</div>

new Vue({
    el: '#app',
    data: {
        items: ['aaa', 'bbb', 'ccc']
    },
})

显示的效果大概是这样的：

aaabbbccc ttt sss

前面循环出的span没有间距，而后面的span有间距，不知道为什么。

解决方案

如果有display:inline或是display:inline-block的元素相邻，并且它们之间有换行，那么就会自动产生一段间隙。
可以在这些元素的父元素上设置font-size:0;，就可以消除换行带来的间隙。

ps：这种情况下，如果代码不换行，就不会产生间隙。

这篇关于javascript - vue循环出的span之间没有间距而直接写的span之间有间距，这是为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！