Vue V-for嵌套循环数组

首先写个循环数组V-FOR，很简单

<div v-for="item in items" :key="item.id" :value='item.value' :label="item.label">

<div>{{item.name}}</div>

</div>

<script>

items:[

{id:1,name:"可乐"},

{id:2,name:"雪碧"},

{id:3,name:"橙子"},

]

</script>

这里简单的输出了三个值，那么在这基础上再加入一个循环数组该怎么做呢！

<div v-for="item in items" :key="item.id" :value='item.value' :label="item.label">

<div>{{item.name}}</div>

<div v-for="arry in item.itemse" :key="arry.id" :value='item.value' :label="item.label">

<div>{{arry.text}}</div>

</div>

</div>

<script>

items: [

{

id: 1,

name: "可乐",

itemse: [{ id: 4, text: "冷冻可乐" }, { id: 5, text: "香草可乐" }]

},

{

id: 2,

name: "雪碧",

itemse: [{ id: 6, text: "冷冻雪碧" }, { id: 7, text: "青柠雪碧" }]

},

{

id: 3,

name: "橙子",

itemse: [{ id:8, text: "冷冻橙子" }, { id: 9, text: "新鲜橙子" }]

}

]

</script>

这样一个嵌套循环数组就好了。

Vue V-for嵌套循环数组相关推荐

Vue中实现清空数组和清空el-table
场景要实现的效果是那么就要用到怎样将这个el-table清空,即在vue中怎样将数组清空. 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公 ...
[vue] vue能监听到数组变化的方法有哪些？为什么这些方法能监听到呢？
[vue] vue能监听到数组变化的方法有哪些?为什么这些方法能监听到呢? 你说的是vue内部的源码对Array数据的中转代理嘛好像对push, shift等通用方法都做了代理吧! 因为它对中转的数 ...
[vue] 分别说说vue能监听到数组或对象变化的场景，还有哪些场景是监听不到的？无法监听时有什么解决方案？
[vue] 分别说说vue能监听到数组或对象变化的场景,还有哪些场景是监听不到的?无法监听时有什么解决方案? 无法监听时的方案: 数组:改变数组的值:this.$set() 改变数组长度:arr.sp ...
vue 监听map数组变化_解决vue无法侦听数组及对象属性的变化问题
一.数组 1.可以监听到的情况如push.splice.=赋值(array=[1,2,3]) 2.无法监听到的情况使用下标修改某个元素(这种比较常见) array[index] = 1 objec ...
vue -V 执行失败檔案名稱、目錄名稱或磁碟區標籤語法錯誤。
vue -V 执行失败提示 :檔案名稱.目錄名稱或磁碟區標籤語法錯誤. 安装 @Vue/cli 流程 yarn global add @vue/cli yarn global v1.22.10 [1 ...
探讨Vue 数据监测原理-第五节-展开介绍 Vue中监测-【数组】数据的原理
文章目录探讨一下Vue 数据监测的原理本次探讨共的第五个章节第五节:展开介绍 Vue中监测-[数组]数据的原理 1. 案例 1.1. 页面案例 2. 数组形式|对象形式爱好的区别 2.1. 页面 ...
vue使用js遍历数组和对象
前言在vue中,遍历数组和对象的方式略有不同,不能完全以数组或对象的遍历方式给对方使用并获取数据.为了记录以及以后方便查看,现在对其进行整理. 数组遍历以数组 array = [1,2,3,4,5 ...
VScode输入vue -V提示vue : 无法加载文件
问题1: Suggestion [3,General]: 找不到命令 vue,但它确实存在于当前位置.默认情况下,Windows PowerShell 不会从当前位置加载命令.如果信任此命令,请改为 ...
VUE 模板 v-if 判断数组是否为空
vue 模板 v-if 判断数组是否为空 : 为空:array == undefined ||array == null || array.length <= 0 (顺序不能调换)不为空: ar ...

Vue V-for嵌套循环数组

Vue V-for嵌套循环数组相关推荐

最新文章

热门文章