Vue.js 打印最后一个动态v-for循环元素的属性

在与Vue的循环中，如何仅打印最后一条消息的文本和时间

结构如下： 数据：{

---

{{contatto.nome}}
{{messaggio.testo}

所以它会打印所有内容我只想使用自定义方法打印最后一个文本和最后一个小时

：

newvue({
el:“应用程序”，
数据：（）=>({
康塔蒂：[
{
诺姆：“名字1”，
immagine:“_1”，
可视性：是的，
梅萨吉：[
{data:'10/01/2020 15:30:55'，ora:'15:30'，testo:'test1-a'，stato:'inviato'，visualizezato:true}，
{data:'10/01/2020 16:15:22'，ora:'16:15'，testo:'test1-b'，stato:'ricevuto'}
]
},
{
诺姆：“名字2”，
immagine:“_1”，
可视性：是的，
梅萨吉：[
{data:'10/01/2020 16:15:22'，ora:'16:15'，testo:'test2-a'，stato:'ricevuto'}
]
}
]
}),
方法：{
getMostRecentMessageTesto（索引）{
const{messaggi=[]}=this.contatti[index]；
const lastItem=messaggi.length>0？messaggi[messaggi.length-1]：{}；
返回lastItem.testo；
}
}
})；

{{nome}}{{getMostRecentMessageTesto（index）}

您可以在html中直接运行js代码，但只需一行。 我建议您为此创建一个函数，用于干净的代码

      {{contatti[0].messaggi[contatti[0].messaggi.length-1].data}}
      {{contatti[0].messaggi[contatti[0].messaggi.length-1].testo}}

---

谢谢你的回答，但我通过设置一个条件解决了这个问题

---

v-for=“（项，键）在数组中”v-if=“键+1===数组.长度”>

回答得很好。但是，无论如何，

Array.prototype.map

返回一个全新的数组，我认为在特定情况下可能会非常昂贵，尤其是在源数组非常大的情况下。相反，还可以创建一个方法，例如

getMostRecentMessage（contatti）

它可以为

v-for

@MattU中的每个项目调用好主意！以上我以更简洁的方式表达代码

                <ul class="px-3 list-group list-group-flush">

                  <li class="list-group-item flex-row " v-for="(contatto, index) in contatti" @click="selezioneContatto(index)">
                  
                    <img :src="'./assets/img/avatar' + contatto.immagine + '.jpg'" class="img-fluid avatar rounded-circle me-3 py-2" alt="">
                    <span>{{contatto.nome}}</span>
                    <span v-for="(messaggio, index) in contatto.messaggi[index]" >{{messaggio.testo}}</span>
                    
                  </li>
                  
                </ul>

      {{contatti[0].messaggi[contatti[0].messaggi.length-1].data}}
      {{contatti[0].messaggi[contatti[0].messaggi.length-1].testo}}