如何使用分隔符“连接” Vue中的元素？

Question

在Python中，有一种简单的方法可以用分隔符将元素链接起来，只在“内部”元素之间添加分隔符：

>>> print(" → ".join(['hello', 'world', 'bonjour']))
hello → world → bonjour

我想知道在Vue.js中是否有一种简单的方法可以做到这一点。我当时正在考虑使用<v-for>，但我认为我无法影响迭代的构建方式：

new Vue({
  el: "#app",
  data: {
    boxes: [1, 2, 3]
  },
})

#app {
  display: flex;
}

.box {
  background-color: red;
  width: 60px;
  height: 30px;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="box in boxes" class="box">hello</div>
</div>

是否可以在第一个和第二个框以及第二个和第三个框之间添加分隔符（→）？

Answer 1

这不是Vue特有的问题，您可以使用Array.prototype.join()在数组项之间插入分隔符。

在您的用例中，您可以创建一个这样的计算属性

new Vue({
  el: "#app",
  data: {
    boxes: [1, 2, 3]
  },
  computed: {
    // returns '1→2→3'
    boxesWithSeparator() {
      return this.boxes.join('→')
    }
  }
})

Answer 2

没有box类，您可以使用javascript split和join函数

new Vue({
  el: "#app",
  data: {
    boxes: ['hello', 'world', 'bonjour']
  },
})

#app {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="box in boxes.join(' →').split(' ')" class="">{{box}}</div>
</div>

使用您现有的代码

new Vue({
  el: "#app",
  data: {
    boxes: [1, 2, 3]
  },
})

#app {
  display: flex;
}

.box {
  background-color: red;
  width: 60px;
  height: 30px;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="box,index in boxes" class="">
      <span class="box">Hello</span><span v-if="index<boxes.length-1">=></span>
  </div>
</div>