Die Verwendung von v-for in vue

v-for Ruft die Daten der ersten n Elemente, des mittleren Bereichs und der letzten n Elemente der Liste ab

list: [
  { img: '/static/home/news1.png', title: '标题1' },
  { img: '/static/home/news2.png', title: '标题2' },
  { img: '/static/home/news1.png', title: '标题3' },
  { img: '/static/home/news2.png', title: '标题4' },
  { img: '/static/home/news2.png', title: '标题5' },
  { img: '/static/home/news1.png', title: '标题6' },
  { img: '/static/home/news2.png', title: '标题7' },
  { img: '/static/home/news1.png', title: '标题8' },
  { img: '/static/home/news2.png', title: '标题9' },
  { img: '/static/home/news1.png', title: '标题10' }
]

1. Holen Sie sich die ersten n Datenelemente in der Liste

list.slice(0, 5) // Holen Sie sich die ersten 5 Datenelemente in der Liste

Ausgabe: Überschrift 1, Überschrift 2, Überschrift 3, Überschrift 4, Überschrift 5

<view class="paddingBottom10" v-for="(item, i) in list.slice(0, 5)" :key="i">
  <u-image width="260rpx" height="190rpx" border-radius="8" :src="item.img" />
  <view class="marginTop6 paddingLeft10 fontSize26 fontWeight700">{
   
   { item.title }}</view>
</view>

2. Holen Sie sich die Daten zwischen der Liste n ~ m

list.slice(3, 7) // holt die Daten zwischen Liste 4 ~ 7

Ausgabe: Überschrift 4, Überschrift 5, Überschrift 6, Überschrift 7

<view class="paddingBottom10" v-for="(item, i) in list.slice(3, 7)" :key="i">
  <u-image width="260rpx" height="190rpx" border-radius="8" :src="item.img" />
  <view class="marginTop6 paddingLeft10 fontSize26 fontWeight700">{
   
   { item.title }}</view>
</view>

3. Holen Sie sich die letzten n Datenelemente in der Liste

list.slice(list.length - 4, list.length) // Holen Sie sich die letzten 4 Daten in der Liste

Ausgabe: Überschrift 7, Überschrift 8, Überschrift 9, Überschrift 10

<view class="paddingBottom10" v-for="(item, i) in list.slice(list.length - 4, list.length)" :key="i">
  <u-image width="260rpx" height="190rpx" border-radius="8" :src="item.img" />
  <view class="marginTop6 paddingLeft10 fontSize26 fontWeight700">{
   
   { item.title }}</view>
</view>

v-for durchläuft Zahlen direkt

<view v-for="i of 5" :key="i">第{
   
   { i + 1 }}个</view>