先上效果图:
贴上我的代码:
<span v-if="!isBin" class="chat-btn"><el-popoverv-if="!isBin"v-model="popoverVisable" // 通过改变 v-model 绑定的属性值,来控制显示隐藏placement="right"width="181"popper-class="bind-card-popover"trigger="manual"><div v-if="!isBin" class="con">点击这里尽快绑定学员名片哦~</div><el-buttonv-if="!isBin"slot="reference"type="primary"size="mini"@click="(popoverVisable = true), (show = true)">绑定名片</el-button></el-popover><!-- <el-button slot="reference" type="primary" size="mini" @click="show = true">绑定名片</el-button> --></span>
这里是使用el-popover
来写的,我们要根据条件来渲染图片中的内容,但是发现 当v-if条件变化时,虽然 v-if绑定的值已经拿到了,但是像我的代码中的button
就是不渲染。
解决办法: 使用v-model
来控制渲染,就能解决button
不渲染的问题。
在data中定义一个属性popoverVisable:false
,然后去改变这属性,来控制显示。
贴上我的写法:
popoverhiddleToShow() {this.popoverVisable = false;setTimeout(() => {this.popoverVisable = true;}, 200);
可以使用watch监控判断的条件,当条件变化时来调用这个函数,改变这个属性,以达到是否渲染显示的效果。
如果一开始就要判断是否渲染可以在 mounted这个生命周期中来改变属性值。
mounted() {setTimeout(() => {this.popoverVisable = true;}, 200);},