vue 指定数据后插一条广告数据

此知识点主要是利用原生js中的一些数组方法（鉴于参考）

方法一：

html代码展示如下：

 1 <div v-for="(allItem, index) of allList" :key="index">
 2     <div v-for="(item, i) of tableData.slice(index * 5, (index+1)*5)" :key="i"> <!-- 指定在第几条后方添加广告 -->
 3         <div>
 4             <!-- 列表数据 -->
 5         </div>
 6         <div v-if="imgadInfo[index] && i === 4"> <!-- 判断广告不足 5 条时不显示 -->
 7             <img :src="imgadInfo[index].img" alt="未上传图片或图片已损坏"/>
 8         </div>
 9     </div>
10 </div>

js/es代码展示如下：

 1 export default {
 2     data () {
 3         return {
 4             allList: [], // 合并的数据
 5             tableData: []， // 数据 - 类
 6             imgadInfo: [{img: '图片路径'}] // 添加的广告 - 数据
 7         }
 8     },
 9     mounted: function () {
10         let data = {} // 数据
11         this.tableData = this.tableData.concat(data)
12         for (let i = 0; i < this.tableData.length / 5; i++) {  // 默认在某条数据后插一条广告数据
13             this.allList.push(i)  // 添加到默认数据数组中
14         }
15     }
16 }

问题点：

像这样的问题，主要是对象及数组合并问题，如果不清楚怎样合并数组，点击此链接  https://www.cnblogs.com/dxshare/p/15611447.html

了解了 什么是合并以后 就要用到我们非常熟悉的 下标（index）及 slice（截取），来配合进行该需求的完善

方法二：

html代码展示如下：

 1 <view v-for="(item, index) in listData" :key="index">
 2     <view v-for="(list, i) in item" :key="i">
 3         <view>
 4             <!-- 列表数据 -->
 5         </view>
 6         <view class="advertising" v-if="imgadInfo[index] && i === 4"> <!-- 判断广告不足 5 条时不显示 -->
 7             <image :src="imgadInfo[index].img" mode=""></image>
 8         </view>
 9     </view>
10 </view>

js/es代码展示如下：

 1 export default {
 2     data () {
 3         return {
 4             orderList: [], // 合并的数据
 5             listData: []， // 数据 - 类
 6             imgadInfo: [{img: '图片路径'}] // 添加的广告 - 数据
 7         }
 8     },
 9     mounted: function () {
10         let data = {} // 后台数据
11         this.orderList.push(...data) // this.orderList主要是用于合并及判断长度的处理 ... 简单去重
12         this.listData = [this.orderList]
13         // 每五条差一条广告
14         this.listData = []
15         for (let i = 0; i < this.orderList.length / 5; i++) {
16           this.listData.push([...this.orderList.slice(i * 5, (i + 1) * 5)]) // 这里指定在第几条后方添加广告
17         }
18     }
19 }

问题点：

在某种情况下不可以使用行内方法时，就可以使用以上方法来进行slice截取，上面举例的是小程序，可以根据自己所需进行调整

总结：

 利用数组截取index方式，来实现此功能，这是现实工作中所遇到的问题，希望此文章可以对伙伴们有所帮助

标签：10,vue,listData,orderList,data,let,广告,数据
来源： https://www.cnblogs.com/dxshare/p/15608823.html