vue 中 v-for 的使用

v-for 获取列表的前 n 条、中间范围、末尾 n 条的数据

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、获取列表前 n 条数据

list.slice(0, 5) // 获取列表前 5 条数据

输出：标题1、标题2、标题3、标题4、标题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、获取列表 n ~ m 之间的数据

list.slice(3, 7) // 获取列表 4 ~ 7 之间的数据

输出：标题4、标题5、标题6、标题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、获取列表最后 n 条数据

list.slice(list.length - 4, list.length) // 获取列表最后 4 条数据

输出：标题7、标题8、标题9、标题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 直接循环数字

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