时间戳

首页 > 解决方案 > 我可以在没有 v-for 的情况下添加空间吗？

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

问题描述

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

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

我必须这样做。

标签： vue.js

解决方案

首先，您需要将图像和空间包装在<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.

推荐阅读