关于cover-view v-if在以下情况中失效的一种解决方案

weixin_49919383

于 2024-07-04 11:48:39 发布

阅读量113

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/weixin_49919383/article/details/140171969

版权

<cover-view marker-id="0" v-if="c">
    <cover-view v-if="!a">
	    <cover-view>
		    <cover-view>
			    <text>aaaa</text>
		    </cover-view>
	    </cover-view>
    </cover-view>
    <cover-view v-else>
	    <text>bbbbbbbbb</text>
    </cover-view>
<cover-view>

这是在地图标记点上做自定义气泡窗时出现的问题，本该消失的aaaa没有消失，去掉text外面的cover-view后又正常了，如下

<cover-view marker-id="0" v-if="c">
    <cover-view v-if="!a">
	    <text>aaaa</text>
    </cover-view>
    <cover-view v-else>
	    <text>bbbbbbbbb</text>
    </cover-view>
<cover-view>

但是，有时又不得不套上几个cover-view，该怎么办？可以按如下方式做，

<cover-view marker-id="0" v-if="c">
    <cover-view :class=[a?'hidden':'']>
	    <cover-view>
		    <cover-view>
			    <text>aaaa</text>
		    </cover-view>
	    </cover-view>
    </cover-view>
    <cover-view :class=[!a?'hidden':'']>
	    <text>bbbbbbbbb</text>
    </cover-view>
<cover-view>

.hidden{
    width: 0rpx;
	height: 0rpx;
}