vue學習筆記---class與style繫結以及條件渲染
阿新 • • 發佈:2019-01-24
繫結HTML Class
#物件語法
我們可以傳給 v-bind:class一個物件,以動態切換class
<div v-bind:class="{ active: isActive }"></div> |
v-bind:class
指令也可以與普通的 class 屬性共存。
條件渲染
#用key管理可複用的元素
<template v-if="loginType === 'username'"> <label>Username</label |
另一個用於根據條件展示元素的選項是v-show指令
<h1 v-show="ok">Hello!</h1 >
不同的是帶有v-show指令的元素始終會被渲染儲存在DOM中,v-show只是簡單的切換css的display屬性v-show
不支援 <template>
元素,也不支援 v-else
#v-if 與 v-show的區別
v-if
是“真正”的條件渲染,因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。
v-if
也是惰性的:如果在初始渲染時條件為假,則什麼也不做——直到條件第一次變為真時,才會開始渲染條件塊。
相比之下,v-show
就簡單得多——不管初始條件是什麼,元素總是會被渲染,並且只是簡單地基於 CSS 進行切換。
一般來說,v-if
有更高的切換開銷,而 v-show
v-show
較好;如果在執行時條件很少改變,則使用 v-if
較好。
v-if與v-for一起使用:v-for的優先順序更高!