Vue v-show和v-if區別
阿新 • • 發佈:2022-02-10
vue中v-show和v-if的區別
(1)、v-if和v-show用於檢視層進行條件判斷檢視展示
(2)、v-if的原理是根據判斷條件來動態的進行增刪DOM元素,v-show是根據判斷條件來動態的進行顯示和隱藏元素,頻繁的進行增刪DOM操作會影響頁面載入速度和效能,由此我們可以得出結論:
當您的專案程式不是很大的時候,v-if和v-show都可以用來進行判斷展示和隱藏(這種場景使用v-if只是影響不大,並不是沒有影響);
當您的專案程式比較大的時候,不推薦使用v-if來進行判斷展示和隱藏,推薦使用v-show;
(3)、只有v-if能和v-else連用進行分支判斷
示例:
<template> <div> <div v-if="ifflag">v-if顯隱</div> <div v-show="showflag">v-show顯隱</div> </div> </template> <script> export default { data() { return { showflag:false, ifflag:true }; } }; </script>