先上效果图：
贴上我的代码：
<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);},
