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

如果没有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>

Answer 2

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

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

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

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

2 个答案: