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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM