javascript - Vue - v-如果列表中没有具有该名称的项目，则显示图像

Question

<ul class="ulItems" v-for="item in listingItems" :key="item.channels">
  <li class="liItems">
    {{ item.itemName }}
  </li>
</ul>

我想在列表不包含具有该名称的对象的情况下显示图像

Answer 1

如果我理解正确，请尝试如下代码片段:

new Vue({
  el: '#demo',
  data() {
    return {
      listingItems: [{itemName: 'aaa', channels: 1}, {itemName: '', channels: 2}, {itemName: 'bbb', channels: 3}],
      noNameImg: 'https://picsum.photos/50'
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul class="ulItems" v-for="item in listingItems" :key="item.channels">
    <li class="liItems" v-if="item.itemName">
      {{ item.itemName }}
    </li>
    <li class="liItems" v-else>
      <img :src="noNameImg" />
    </li>
  </ul>
</div>