區別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更好。