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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
js实现目录定位正文示例
Nov 14 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
jstree的简单实例
Dec 01 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
webpack4 处理SCSS的方法示例
Sep 03 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
深入了解PHP类Class的概念
2012/06/14 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python正则表达式指南 推荐
2018/10/09 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
python3 pygame实现接小球游戏
2019/05/14 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
请假条标准格式规范
2014/04/10 职场文书
校运动会广播稿300字
2014/10/07 职场文书
个人求职信格式范文
2015/03/20 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
责任书范本大全
2015/05/11 职场文书
单位考核鉴定意见
2015/06/05 职场文书
python实现进度条的多种实现
2021/04/29 Python
详解python的内存分配机制
2021/05/10 Python
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
Spring实现内置监听器
2021/07/09 Java/Android