<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>條件渲染</title> </head> <body> <div id="if"> <h1 v-if="ok">h1</h1> <h1 v-else>h2</h1> <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> <!--v-else 元素必須緊跟在 v-if 元素或者 v-else-if的后面——否則它不能被識別--> <br> <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template> <!--v-else-if 必須跟在 v-if 或者 v-else-if之后--> <!--Vue 嘗試盡可能高效的渲染元素,通常會復用已有元素而不是從頭開始渲染。<input> 會被復用,僅僅是替換了他們的 placeholder。--> <!--這樣也不總是符合實際需求,所以 Vue 提供一種方式讓你可以自己決定是否要復用元素。你要做的是添加一個屬性 key ,key 必須帶有唯一的值。--> <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template> <!--注意, <label> 元素仍然會被復用,因為沒有被添加了 key 屬性。--> <h1 v-show="ok">Hello h1!</h1> <!--注意: v-show 不支持 <template> 語法--> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el:"#if", data: { ok:true, type:'D', loginType:'username2' } }) </script> </body> </html>
v-if
也是惰性的:如果在初始渲染時條件為假,則什么也不做——在條件第一次變為真時才開始局部編譯(編譯會被緩存起來)。
相比之下, v-show
簡單得多——元素始終被編譯並保留,只是簡單地基於 CSS 切換。
一般來說, v-if
有更高的切換消耗而 v-show
有更高的初始渲染消耗。因此,如果需要頻繁切換使用 v-show
較好,如果在運行時條件不大可能改變則使用 v-if
較好。