vuejs显示默认图像如果没有imagedata是发现为2属性

k5ifujac 于 2023-03-13 发布在 Vue.js

关注(0)|答案(2)|浏览(131)

我正在使用vuejs。如果两个属性（selImage和imageData为空）显示默认图像时会遇到困难。是否有更好的方法来编写此内容。如果只有一个属性，我可以实现，但不能同时使用两个属性。在这种情况下，我不希望使用computed。任何帮助。谢谢

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

  },
  methods: {

  }
})

<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="example.com/myimage.jpg" v-show="!selImage || !imageData" />

</div>

vue.js

来源：https://stackoverflow.com/questions/75637451/vuejs-show-default-image-if-no-imagedata-is-found-for-2-properties

2条答案

按热度按时间

tkclm6bt1#

可以创建计算特性：

new Vue({
  el: "#app",
  data() {
    return {
      path: `https://example.com/`,
      selImage: '',
      imageData: '',
    }
  },
  computed: {
    getImg() {
      if(!this.selImage && !this.imageData) return 'https://picsum.photos/200'
      return this.selImage ? this.path + this.selImage : this.path + this.imageData
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img :src="getImg" />
</div>

赞(0）回复(0）举报 2023-03-13

btqmn9zl2#

下面是在我的案例中效果最好的方法。

<img v-if="selImage" :src="path+selImage" />
                <img v-else-if="imageData" :src="imageData" />
                <img  v-else src="example.com/myimage.jpg"/>

赞(0）回复(0）举报 2023-03-13

我来回答

vuejs显示默认图像如果没有imagedata是发现为2属性

2条答案

相关问题

热门标签

最新问答