连接时禁用空间

Question

我有一个看起来像这样的数组

skills: [
        "HTML5",
        "CSS3",
        "SCSS",
        "Bootstrap",
        "JavaScript",
        "Vue.js",
        "PHP",
        "MySQL",
        "Symfony"
      ]

在我的模板中我正在做类似的事情

<ul>
  <li v-for="(skill,index) of skills" :key="index">{{ skill + ', '}}</li>
</ul>

但我得到的是

HTML5,CSS3,SCSS,Bootstrap,JavaScript,Vue.js,PHP,MySQL,Symfony, 

我如何使用空格？

顺便说一句，有没有更好的方法来连接我的数组的元素？我第一次这样使用 join()

<ul>
  <li v-for="(skill,index) of skills.join(', ')" :key="index">{{ skill }}</li>
</ul>

但不仅空格仍然被禁用，而且它返回我元素的每个字符，我不知道为什么

喜欢

<ul data-v-c226fde6="">
<li data-v-c226fde6="">H</li>
<li data-v-c226fde6="">T</li>
<li data-v-c226fde6="">M</li>
<li data-v-c226fde6="">L</li>
<li data-v-c226fde6="">5</li>
<li data-v-c226fde6="">,</li>
<li data-v-c226fde6=""> </li>
<li data-v-c226fde6="">C</li>
<li data-v-c226fde6="">S</li>
<li data-v-c226fde6="">S</li>
<li data-v-c226fde6="">3</li>
...

编辑：否则我只能做的是

<ul>
  <li v-for="(skill,index) of skills" :key="index">{{ skill + ','}}</li>
</ul>

然后在 li 中添加一些 padding-right 但我不知道这是否是一个好习惯 + 我不知道如何删除最后一个元素后的逗号

Answer 1

在li 等html 模板中，您必须使用  指定空格字符；

<ul>
  <li v-for="(skill,index) of skills" :key="index">{{ skill + ','}}&nbsp;</li>
</ul>

也结帐https://www.w3schools.com/html/html_entities.asp 了解有关 HTML 实体的更多信息

Answer 2

使用该代码，您将获得<li></li> 元素列表，其中每个技能如下所示：

<li>HTML5,</li><li>CSS3,</li><li>...

只需在右侧添加一个类或什至带有边距的样式，即可在元素之间添加一点空间：

<ul>
  <li v-for="(skill,index) of skills" style="margin-right: 5px" :key="index">{{ skill }}</li>
</ul>

更好：

<ul>
  <li v-for="(skill,index) of skills" class="class-with-some-margin-right" :key="index">{{ skill }}</li>
</ul>

Answer 3

您可以使用 CSS 在每个项目后添加 ', '，如下所示：

var example1 = new Vue({
  el: '#example-1',
  data: {
    skills: ["HTML5", "CSS3", "SCSS", "Bootstrap", "JavaScript",
             "Vue.js", "PHP", "MySQL", "Symfony", ]
  }
})

/* styling help: 
  Q: https://stackoverflow.com/questions/1517220/
  A: https://stackoverflow.com/a/1517228/7505395 */

#example-1 {
  display: inline;
  list-style: none;
}

#example-1 li {
  display: inline;
}

#example-1 li:after {
  content: ", ";
}

#example-1 li:last-child:after {
    content: "";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<ul id="example-1">
  <li v-for="(sk, idx) in skills" :key="idx">{{ sk }}</li>
</ul>

此答案已将其合并到 Vue 中，对于纯 css 答案，请转到 here。

与往常一样，您也可以像这样在 Vues {{}} 中组合普通文本：{{ skill + ', ' }} - 不确定这是否有帮助，因为它适用于所有替换并且您最终会得到一个尾随 ,