为什么高度:0在css定义中不起作用

Question

在我的项目中，我使用 vue.js 2，并且我有一个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 上挣扎