我可以在没有v-for的情况下添加空间吗

Question

<img :src="item" v-for="item in images" />space

如何在/>后面添加空格？

我必须这么做。

Answer 1

首先，您需要将图像和空间包装在<template>中。但这比这更复杂，因为Vue在各种情况下都会去掉空间。

这里有一种方法，可以使用{{ ' ' }}强制保留空间：

new Vue({
el: '#app',

data () {
return {
images: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
}
})

#app {
background: #ddd;
text-align: justify;
width: 200px;
}
img {
width: 40px;
}

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<div id="app">
<template v-for="item in images">
<img src="https://vuejs.org/images/logo.png">
{{ ' ' }}
</template>
</div>

也可以使用像<span>这样的伪元素来代替{{ ' ' }}。

您可能需要考虑使用flex box而不是text-align: justify。