前端vue元素显示隐藏 v-if 和 v-show 指令小案例_v-show指令实现css实例

原理:

v-if：通过 创建、销毁 dom元素的方式达到显示、隐藏效果(销毁后有一个占位符 )。

v-show：通过css控制样式style达成显示、隐藏效果。

• display:none; 隐藏
• display:block; 显示

区别:

v-if 有更高的切换消耗 ，如果运行条件不大可能改变，则v-if 较合适。

v-show有更高的渲染消耗，如果需要频繁切换，则v-show 较合适。

注意:

v-if使得元素被隐藏后，这个元素的物理位置有一个名称为 的占位符，其与html的注释信息没有关系。

使用:

v-if

<button @click="isBook = !isBook">点击切换</button>
<p v-if='isBook'>isBook 使用v-if</p>
<p v-if='!isBook'>!isBook 使用v-if</p>
1
2
3

v-show

<button @click="isBook = !isBook">点击切换</button>
<p v-show='isBook'>isBook 使用v-if</p>
<p v-show='!isBook'>!isBook 使用v-if</p>
1
2
3

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！