uniapp中对于两层嵌套的 v-for如何定义空数组并且调用
时间: 2024-12-23 14:19:27 浏览: 0
浅谈vue.js中v-for循环渲染
在UniApp中,如果你想在一个两层嵌套的`v-for`循环中处理可能出现的空数组情况,你可以这样做:
假设你有一个数据结构类似这样的对象数组:
```javascript
data() {
return {
items: [
{ categories: [] }, // 第一层的数组可能为空
{ categories: [{ name: 'Category 1' }, { name: 'Category 2' }] }, // 内部数组可能非空
{ categories: [] } // 另外一个空数组
]
}
}
```
当你需要遍历这两个层次的数组时,可以采用递归的方式来处理,示例代码如下:
```html
<template>
<view>
<ul>
<li v-for="item in items">
<!-- 如果categories是空数组 -->
<span v-if="!item.categories.length">无分类</span>
<!-- 如果categories不是空数组 -->
<ul v-for="(category, index) in item.categories">
<li>{{ category.name }}</li>
</ul>
</li>
</ul>
</view>
</template>
<script>
export default {
data() {
// 省略上面的数据定义
},
methods: {}
}
</script>
```
在这个例子中,当`item.categories`是空数组时,会显示“无分类”;如果不是空数组,则会显示每个类别名称。
阅读全文