javascript - 如果使用 v-for 循环索引大于 VUEJS 中的值，如何显示(+10 以上)

Question

我正在构建一个收件人电子邮件表单，其中一次可能有超过 100 个收件人，但我只能显示 9 个收件人，并且在显示 9 个收件人后需要添加(+10 或任何剩余收件人)。

 <div v-for="(item, index) in recipient" class="app-splitter two-cols">
        <p>{{item.name}}</p>

        <el-button
          style="min-width:20px"
          @click="handleDeleteRecipient(index)"
          icon="el-icon-delete"
          circle
        ></el-button>
      </div>

Answer 1

正如我在评论中提到的。您可以像此示例一样创建计算属性并循环遍历它。如果不需要，请不要循环所有 100 个以上的收件人...最终可能会是 1000 个。

computed: {
  top10() {
    return this.recipient.slice(0, 10);
  },
  rest() {
    return this.recipient.length - 10;
  }
}