vue元素顯示隱藏 v-if 和 v-show 指令
v-if 和 v-show
在vue中，v-if 和 v-show 會根據接收 true/false 資訊使得頁面上元素達到顯示或隱藏的效果。
語法：
<標籤 v-if="true/false"></標籤>
<標籤 v-show="true/false"></標籤>
<!--true:顯示 false:隱藏-->
原理：
v-if：通過 建立、銷燬 dom元素的方式達到顯示、隱藏效果(銷燬後有一個佔位符 )。
v-show：通過css控制樣式style達成顯示、隱藏效果。
display:none; 隱藏
display:block; 顯示
特點：
v-if 有更高的切換消耗 ，如果執行條件不大可能改變，則v-if 較合適。
v-show有更高的渲染消耗，如果需要頻繁切換，則v-show 較合適。
注意：
v-if使得元素被隱藏後，這個元素的物理位置有一個名稱為<!---->的佔位符，其與html的註釋資訊沒有關係。
案例：
通過按鈕控制，使得元素內容在顯示和隱藏之間切換：
<style>
#one{width: 300px;height: 40px;background-color:orange;}
#two{width: 300px;height: 40px;background-color:lightgreen;}
</style>
</head>
<body>
<div id="app">
<h2>v-if和v-show</h2>
<button @click="flag=!flag">切換</button>
<p id="one" v-if="flag">vue指令--v-if</p>
<p id="two" v-show="flag">vue指令--v-show</p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:false // 控制標籤是否顯示true/false
},
});
</script>
注意：
事件驅動不僅可以是methods方法，也可以是簡單的js語句。
v-if 和 v-else
在Vue中，v-if 、v-else-if 和 v-else 三個指令結合可以實現多路分支結構。
v-if 可以單獨使用，形成單路分支結構。
v-if 和 v-else 可以合作使用，實現雙路分支結構。
v-if 、v-else-if 和 v-else 可以合作使用，實現多路分支結構。
語法：
<標籤 v-if="true/false"></標籤>
<標籤 v-else-if="true/false"></標籤>
<標籤 v-else-if="true/false"></標籤>
<標籤 v-else></標籤>
注意：
以上4個標籤分支結構，最終只會走一個，第一個為true的那個標籤會執行 或 執行v-else。
案例應用：
判斷品牌資訊是否存在，並顯示對應內容
<table v-if="brandList.length>0">
……
</table>
<table v-else>
<tr><td>沒有任何記錄！</td></tr>
</table>
注意：
v-if 和v-else 一併使用，頁面沒有<!---->佔位符了。
————————————————
版權宣告：本文為CSDN博主「木藍茶陌*_*」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/jyn15159/article/details/111245324