Vue列表循环从指定下标开始的多种解决方案
更新时间：2020年04月08日 09:04:02 作者：Andy__Zhanglv-1
这篇文章主要介绍了Vue列表循环从指定下标开始的多种方案,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
最近遇到一个问题，在循环商品列表时，因为数组的第一个是商品的品牌介绍，所以循环时不能直接循环，只能从第二个元素开始。
方案1：从数据源头更改，后端直接在列表里去除第一个数组元素。但前端还是需要在别的地方展示品牌信息，故不好去除。（至于为何品牌信息需要和商品混合在一起，原因是业务问题。以前是给APP上展示的。） 方案2：循环时，列表切割
方案3：利用v-if，因为它的优先级低于v-for
方案4：利用method，返回新数组，其实也是切割和第二种类似
方案5：利用computed
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列表循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue Router是Vue.js官方的路由管理器,它主要用于单页面应用程序中,帮助解决页面导航、组件复用等问题,下面我们就来看看vue3中路由写法与传参方式吧2024-11-11
这篇文章主要为大家详细介绍了vue.js实现简单计时器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了Vue中实现v-for循环遍历图片的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue祖孙组件之间的数据传递案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-12-12
Vue.js中一个很重要的知识点是组件通信,不管是业务类的开发还是组件库开发,都有各自的通讯方法,下面这篇文章主要给大家介绍了关于Vue3常用的通讯方式的相关资料,需要的朋友可以参考下2022-05-05
本文主要介绍了element关于table拖拽排序问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
代替Vue Cli的全新脚手架工具create vue示例解析
这篇文章主要为大家介绍了代替Vue Cli的全新脚手架工具create vue示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
教你如何在 Nuxt 3 中使用 wavesurfer.js
这篇文章主要介绍了如何在 Nuxt 3 中使用 wavesurfer.js,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue3-ace-editor如何配置语法问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家介绍了Vue之过滤器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助,希望能够给你带来帮助2021-11-11
最新评论