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

2021-11-29 15:04:27 阅读：224 来源： 互联网

标签：10 vue listData orderList data let 广告数据

此知识点主要是利用原生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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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