學習要點:
1.條件顯示指令
本節課我們來開始學習 Vue3.x 的條件判斷渲染 v-if 的使用方式。
一.條件顯示指令
1. 先復習一下前面課程中 v-if 指令的簡單用法:通過布爾屬性隱藏或顯示:
<div v-if="flag">我是否顯示div>
data() {
return {
flag : true
}
},
2. 當然,也支持 v-else 的條件判斷,具體如下:
<div v-if="flag">我是否顯示div>
<div v-else>404div>
PS:如果布爾值為 false,則顯示 404;
3. 如果有多個分支判斷的話,支持加入 v-else-if 的判斷比較,具體如下:
<div v-if="type === 'A'">Adiv>
<div v-else-if="type === 'B'">Bdiv>
<div v-else-if="type === 'C'">Cdiv>
<div v-else>404div>
PS:屬性里設置 type : 'B',最后顯示 B;
4. 如果條件判斷的區域是一大段代碼,我們可以使用來整合多個元素;
<template v-if="flag">
<h2>標題h2>
<h4>小標題h4>
<div>內容.....div>
template>
5. 如果只是簡單的切換顯示或隱藏,可以使用 v-show,但不支持 else 和 template;
<div v-show="flag">showdiv>
PS:v-if 是條件渲染,惰性的,適時的銷毀和重建渲染的內容;
PS:v-show,就是 display 的隱藏顯示切換;結論:時時頻繁切換用 v-show,反之 v-if;
本文由:蘭州啟點網絡(
www.syzhibo.net)整理發布!