Question

在我的项目中，我使用vue.js 2.9.0，并且有一个img组件。

这是代码：

<template>
<div class="banner">
  <img class="banner-img" :src="bannerImg"/>
</div>
</template>

<script>
export default {
  name: 'DetailBanner',
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  }
}
</script>

<style lang="stylus" scoped>
.banner
  position: relative
  overflow: hidden
  height: 0
  padding-bottom: 55%
  .banner-img
    width: 100%

img的网址为：

http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg

这里我不想显示此img，所以我在CSS中设置height：0。

但是不幸的是，它失败了。我已经测试过移除高度：0，并且显示的高度相同。

为什么身高：0无法工作，谁可以帮助我？

Answer 1

您可以利用Vue.js并使用v-if来显示/隐藏图像，如下所示：

<template> 
 <div class="banner"  v-if="showImg">
     <img class="banner-img" :src="bannerImg"/>
    </div>
 </template>

<script>
   export default {
      name: 'DetailBanner',
      props: {
         sightName: String,
         bannerImg: String,
         gallaryImgs: Array
      },
      data(){
         return{
            showImg:false
             }
       }

  }
</script>

您可以将showImg放在props中，这样，您可以仅使用Vue.js更改图像状态，而避免与CSS纠缠

为什么高度：0在CSS定义中不起作用

1 个答案: