Vue - 检查你是不是在 v-for 循环的最后一个道具上

Posted 2023-02-16

【中文标题】Vue - 检查你是不是在 v-for 循环的最后一个道具上

【英文标题】：Vue - check if you are on the last prop of a v-for loopVue - 检查你是否在 v-for 循环的最后一个道具上

【发布时间】：2017-08-02 01:55:43

【问题描述】：

如果我有以下数据属性：

person: name: 'Joe', age: 35, department: 'IT'

又想循环输出如下：

name: Joe, age: 35, department: IT

到目前为止我有：

<span v-for="(val, key) in person">key: val, </span>

但这显示：

name: Joe, age: 35, department: IT,

末尾有一个额外的逗号，我怎样才能让它检测到它是最后一个道具而不显示逗号？我认为 v-show 或 v-if 可能是解决方案，但无法完全弄清楚如何使其发挥作用。

【问题讨论】：

***.com/q/41761831/1610034的可能重复

【参考方案1】：

这是一种方法。

<span v-for="(val,key,index) of person">
  key: key, val: val, index: index
  <span v-if="index != Object.keys(person).length - 1">, </span>
</span>

【参考方案2】：

如果您正在循环遍历数组而不是对象，这是一个解决方案：

<div id="app">
  <div v-for="(item, index) in items">
    <div v-if="index == items.length - 1">yes</div>
     item ,  index 
  </div>
</div>

【参考方案3】：

您还可以通过在每个项目前插入逗号来“作弊”，因为这样更容易检查第一个项目 (index !== 0)。

<span v-for="(val, key, index) in person">
  <span v-if="index !== 0">, </span>
  key: val
</span>

【讨论】：

这并不能解决获取数组中“最后一个”项的目标。它只获取“不是第一个”项目。

这个解决方案应该可以，不同意 TetraDev。该解决方案根本不显示第一个条目的 , 。但它确实显示所有其他条目之前都带有逗号。良好而简单的解决方案。

我什至不认为这是作弊:)

效果很好，如果你不能轻易确定 .length。

这太棒了，让我对这个问题有了一点不同的看法；最好的逻辑是可以完全删除的。

【参考方案4】：

您可以使用computed 来查看当前索引（v-if 的第三个参数）是否是最后一个属性：

computed: 
  last()
     return Object.keys(this.person).length-1;
  

然后在你的v-for:

<span v-for="(val, key, index) in person">key: val<span v-if="index !== last">, </span> </span>

这是 JSFiddle：https://jsfiddle.net/wv2ujxvn/

【参考方案5】：

这也有效：

<span v-for="(value,key) in persons" :key='key'>
    key: val 
    <span v-if="key+1 != persons.length">, </span>
</span>                                                      

【参考方案6】：

可惜 Vue 没有提供快捷方式。

我个人更喜欢使用小的 CSS：

<div class="list">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

.list span:not(:last-child)::after 
  content: ',';

【参考方案7】：

如果您想将有关此模式的知识存储在代码中而不是堆栈溢出中，您可以创建这样的组件：

<template>
  <span v-if="show"><slot></slot></span>
</template>
<script>
  export default 
    name: 'separator',
    props: ['items', 'index'],
    computed: 
      show () 
        return this.index !== (Array.isArray(this.items) ? this.items : Object.keys(this.items)).length - 1
      
    
  
</script>

这并不一定会使代码变短，但更容易记住：

<span v-for="(val, key, index) of person">key: key, val: val<separator :items="person" :index="index">, </separator></span>