javascript - Tiada ruang antara rentang yang digelungkan oleh vue, tetapi terdapat ruang antara rentang yang ditulis secara langsung.

Question

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

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

Kesan paparan mungkin seperti ini:

aaabbbccc ttt sss

Span yang dilingkarkan di hadapan tidak mempunyai jarak, tetapi span di belakang mempunyai jarak yang saya tidak tahu mengapa.

Answer 1

Jika terdapat elemen paparan:sebaris atau paparan:sebaris-blok bersebelahan antara satu sama lain dan terdapat pemisah baris di antaranya, jurang akan dijana secara automatik.
Anda boleh menetapkan saiz fon:0; pada elemen induk elemen ini untuk menghapuskan jurang yang disebabkan oleh pemisah baris.

ps: Dalam kes ini, jika kod tidak dibalut, tidak akan ada jurang.

Answer 2

Adakah anda memaksa balik pengangkutan dan suapan talian Dalam kes ini, akan ada jurang

Answer 3

Pecah baris elemen sebaris akan menempati ruang Penyelesaiannya adalah untuk menetapkan saiz fon:0; dalam #apl anda dengan cara ini, saiz pemisah baris menjadi 0, dan jarak yang anda nyatakan tidak akan muncul.