vue- 指令v-if 与指令v-show的区别

区别1：

v-if ：可以根据表达式的值在DOM中生成或移除一个元素。

v-show:可以根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素被隐藏，此时查看代码时，该元素上会多一个内联样式style=“display:none”。

 

测试一：皆为true时

 

 

测试2：v-if：false时，该标签被彻底移除DOM

 

测试3：皆为false时，v-if所在的标签彻底被移除DOM，v-show增加了内联样式display:none;

 

 

 

测试4：

 

区别2：

v-if:支持<template>语法；

v-show:不支持<template>语法

 

测试1：

 

测试2：

 

 

注：一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁切换，则使用v-show更好。