Vue如何使用v-if实现列表不存在对应名称对象时显示指定图片

1. 新增计算属性处理判断逻辑 #

把匹配逻辑放到计算属性中，简化模板代码，也方便后续维护修改。假设你要匹配的指定名称为targetName，示例代码如下：

computed: {
  // 判断列表中是否存在包含指定名称的对象
  hasMatchedItem() {
    return this.listingItems.some(item => item.itemName === this.targetName)
  }
}

如果你的需求是列表完全为空时才显示占位图，直接修改判断逻辑为return this.listingItems.length > 0即可。

2. 调整模板结合v-if控制渲染 #

注意Vue不推荐v-for和v-if绑定在同一个元素上，所以用无渲染的<template>标签包裹列表做条件判断即可，你可以根据自己的业务场景选择对应模板写法：

场景1：常规单ul多li结构（推荐优化写法） #

<!-- 存在匹配项时渲染列表 -->
<template v-if="hasMatchedItem">
  <ul class="ulItems">
    <li class="liItems" v-for="item in listingItems" :key="item.channels">
      {{ item.itemName }}
    </li>
  </ul>
</template>
<!-- 无匹配项时显示占位图 -->
<img v-else alt="无匹配数据占位图" src="你的占位图本地路径/线上地址">

场景2：保留你原有单li对应单ul的结构 #

<!-- 存在匹配项时渲染列表 -->
<template v-if="hasMatchedItem">
  <ul class="ulItems" v-for="item in listingItems" :key="item.channels">
    <li class="liItems">
      {{ item.itemName }}
    </li>
  </ul>
</template>
<!-- 无匹配项时显示占位图 -->
<img v-else alt="无匹配数据占位图" src="你的占位图本地路径/线上地址">

内容的提问来源于stack exchange，提问作者John Mcs