前几天小项目,没考虑周全,让后端改接口,改成数组中包含对象中包含数组的形式,后来越琢磨越不对,后台把所有数据放在了一个对象里,我拿弹窗数据不好拿,索性又改了回来,把后端折腾够呛,自己也折腾够呛,发上来,以示警戒
改前拿数据
<div class=\'your-container\'> <div class=\"sortText\"> <div>综合排序</div> <div class=\"sortHot\" @click=\"mostHot\"><p>最热</p><div class=\"sortImg\"><img src=\"../../assets/imgs/mosthot.png\" alt=\"\"></div></div> <div class=\"sortHot\" @click=\"mostNew\"><p>最新</p><div class=\"sortImg\"><img src=\"../../assets/imgs/mostview.png\" alt=\"\"></div></div> <div class=\"adhibition\" @click=\"adhibition(0)\">应用</div> <div class=\"adhibition\" @click=\"adhibition(1)\">算法</div> </div> <!-- bind your configurations --> <vue-scroll :ops=\"ops\"> <div class=\'your-content\'> <ul class=\"listBox\" @handle-resize=\"handleResize\"> <li v-for=\"(item,index) in list\" :key=\"index\" class=\"lis\"> <div class=\"listIcon\"> <img src=\"../../assets/imgs/jicon.png\" alt=\"\"> </div> <div class=\"listText\"> <div class=\"names\">{{item.ename}}</div> <div class=\"introduce\"> {{item.introduce}} <div class=\"details\" @click=\"detailsClick\">详情</div> </div> <div class=\"spans\" v-for=\'(value,key,idx) in item\' :key=\'idx\'> <p v-if=\'Object.prototype.toString.call(value).slice(8,-1) == \"Array\"\'><span>{{value[0]}}:</span><span class=\"lastname\">{{value[1]}}</span></p> </div> <div class=\"lineBox\"> <div class=\"lineoneBox\"><img src=\"../../assets/imgs/line1.png\" alt=\"\"></div> <div class=\"whiteBox\"></div> </div> </div> </li> </ul> </div> </vue-scroll> <detailsPopUp @manage=\"manshow\" v-if=\"manageshow\"/> </div>
改后
<div class=\'your-container\'> <div class=\"sortText\"> <div>综合排序</div> <div class=\"sortHot\" @click=\"mostHot\"><p>最热</p><div class=\"sortImg\"><img src=\"../../assets/imgs/mosthot.png\" alt=\"\"></div></div> <div class=\"sortHot\" @click=\"mostNew\"><p>最新</p><div class=\"sortImg\"><img src=\"../../assets/imgs/mostview.png\" alt=\"\"></div></div> <div class=\"adhibition\" @click=\"adhibition(0)\">应用</div> <div class=\"adhibition\" @click=\"adhibition(1)\">算法</div> </div> <!-- bind your configurations --> <vue-scroll :ops=\"ops\"> <div class=\'your-content\'> <ul class=\"listBox\" @handle-resize=\"handleResize\"> <li v-for=\"(item,index) in list\" :key=\"index\" class=\"lis\"> <div class=\"listIcon\"> <img src=\"../../assets/imgs/jicon.png\" alt=\"\"> </div> <div class=\"listText\"> <div class=\"names\">{{item.ename}}</div> <div class=\"introduce\"> {{item.introduce}} <div class=\"details\" @click=\"detailsClick(item.version,item.trade,item.interfaceClassName)\">详情</div> </div> <div class=\"spans\" > <p><span>提供厂商:</span><span class=\"lastname\">{{item.manufacturerName}}</span></p> <p v-show=\"item.type==0\"><span>使用总次数:</span><span class=\"lastname\">{{item.totalCount}}</span></p> <p v-show=\"item.type==0\"><span>安装时间:</span><span class=\"lastname\">{{item.createTime}}</span></p> <p v-show=\"item.type==1\"><span>平均响应时间:</span><span class=\"lastname\">{{item.avgResponseTime}}</span></p> <p v-show=\"item.type==1\"><span>准确率:</span><span class=\"lastname\">{{item.accuracyRate}}%</span></p> <p v-show=\"item.type==0\"><span>占用内存:</span><span class=\"lastname\">{{item.memory}}</span></p> </div> <div class=\"lineBox\"> <div class=\"lineoneBox\"><img src=\"../../assets/imgs/line1.png\" alt=\"\"></div> <div class=\"whiteBox\"></div> </div> </div> </li> </ul> </div> </vue-scroll> <detailsPopUp @manage=\"manshow\" v-if=\"manageshow\" :scrollDataverson=\"detailsverson\" :scrollDatatrade=\"detailstrade\" :scrollDatainterfaceClassName=\"detailsinterfaceClassName\"/> </div>
以上这篇vue遍历对象中的数组取值示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
© 版权声明
THE END
暂无评论内容