Vue.js中selImage和imageData均为空时显示默认图片的优化方案

• 问题根源：第三个图片的v-show条件逻辑错误，!selImage || !imageData会在任意一个属性为空时都触发显示，不符合「仅当两个属性都为空时显示默认图」的需求，应改用**逻辑与（&&）**判断。

• 修正后的代码：
  HTML部分：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  
  <div id="app">
    <img v-if="selImage" :src="path+selImage" />
    <img v-else-if="imageData" :src="imageData" />
    <img src="https://example.com/myimage.jpg" v-show="!selImage && !imageData" />
  </div>
  

  JS部分保持不变：

  new Vue({
    el: "#app",
    data: {
      path: `https://example.com/`,
      selImage: '',
      imageData: '',
    },
    methods: {
    }
  })
  

• 更简洁写法：无需多个img标签，直接用三元表达式绑定src，满足不使用computed属性的要求：

  <div id="app">
    <img :src="selImage ? path + selImage : (imageData ? imageData : 'https://example.com/myimage.jpg')" />
  </div>
  

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