Vue列表循环从指定下标开始的多种解决方案


Posted in Javascript onApril 08, 2020

最近遇到一个问题,在循环商品列表时,因为数组的第一个是商品的品牌介绍,所以循环时不能直接循环,只能从第二个元素开始。

Vue列表循环从指定下标开始的多种解决方案 

方案1:从数据源头更改,后端直接在列表里去除第一个数组元素。但前端还是需要在别的地方展示品牌信息,故不好去除。(至于为何品牌信息需要和商品混合在一起,原因是业务问题。以前是给APP上展示的。) 方案2:循环时,列表切割

Vue列表循环从指定下标开始的多种解决方案

方案3:利用v-if,因为它的优先级低于v-for

Vue列表循环从指定下标开始的多种解决方案

方案4:利用method,返回新数组,其实也是切割和第二种类似

Vue列表循环从指定下标开始的多种解决方案

方案5:利用computed

Vue列表循环从指定下标开始的多种解决方案

ps:下面看下vue的 v-for获取循环的下标

vue框架中可以使用 v-for 指令可以绑定数组的数据来渲染,那么如何在使用v-for循环的时候获取数组的下标呢?

语法:<li v-for="(arr,index) in arr">{{arr.text}}</li>      /*index表示当前数组的下标*/

<ul id="app">
 <li v-for="(arr,index) in arr">
 {{index}}:{{arr.text}}
 </li>
 </ul>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script type="text/javascript">
 var app = new Vue({
 el:"#app",
 data:{
 arr: [
   { text: '学习 JavaScript' },
   { text: '学习 Vue' },
   { text: '整个牛项目' }
  ]
 }
 })
 </script>

总结

到此这篇关于Vue列表循环从指定下标开始的多种实现方法的文章就介绍到这了,更多相关Vue列表循环内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 #Javascript
vue开发移动端底部导航条功能
Apr 08 #Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 #Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 #Javascript
JS快速实现简单计算器
Apr 08 #Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 #Javascript
vue-cli3单页构建大型项目方案
Apr 07 #Javascript
You might like
MySQL授权问题总结
2007/05/06 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
JavaScript中的闭包
2016/02/24 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
python urllib和urllib3知识点总结
2021/02/08 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
调解协议书
2014/04/16 职场文书
省文明单位申报材料
2014/05/08 职场文书
十佳家长事迹材料
2014/08/26 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
入党申请书怎么写?
2019/06/11 职场文书