vue 條件渲染

2022-08-26 16:18:19 字數 736 閱讀 5308

1.templet中v-if條件組

1.1因為 v-if 是乙個指令,需要將它新增到乙個元素上。但是如果我們想切換多個元素呢?此時我們可以把乙個 元素當做包裝元素,

並在上面使用 v-if。最終的渲染結果不會包含 元素。

paragraph 1

paragraph 2

1.2.可以使用 v-else 指令來表示 v-if 的「else 塊」:

0.5">

now you see me

now you don't

1.3.v-else-if,顧名思義,充當 v-if 的「else-if 塊」。可以鏈式地使用多次:ab

cnot a/b/c

2.用key管理可以復用的元素

2.1vue 會盡可能高效地渲染元素,通常會復用已有元素而不是從頭開始渲染。這麼做,除了使 vue 變得非常快之外,還有一些有用的好處。例如,

如果你允許使用者在不同的登入方式之間切換:

username

email

2.2vue 為你提供了一種方式來宣告「這兩個元素是完全獨立的——不要復用它們」。只需新增乙個具有唯一值的 key 屬性即可:

username

email

2.3:v-show 指令

不同的是帶有 v-show 的元素始終會被渲染並保留在 dom 中。v-show 是簡單地切換元素的 css 屬性 display 。

v-show 不支援 語法,也不支援 v-else

vue條件渲染

判斷1 count 大於0,count的值是 5 判斷2 count的值是 判斷3 count的值是 data 當count值為0時,符合判斷3,呼叫判斷3的語句輸出 5 判斷2 count的值是 判斷3 count的值是 從結果看出,只呼叫了判斷1,說明它的執行 情況是按照 塊順序來去進行的,當前...

Vue 條件渲染

v if v else if v else v show 條件展示 簡單明瞭,直接上案例 案例 條件渲染 單路分支 h3 a p 條件渲染 雙路分支 h3 a p v else b p 條件渲染 多路分支 h3 美食 p 遊戲 p v else 睡覺 p 條件展示 h3 條件展示 p div bod...

Vue條件渲染

使用場景 判斷是否載入,如果為真,就載入,否則不載入 flag 如果flag為true則顯示,false不顯示 span div var vm newvue script type a a div v else if緊跟在v if或v else if之後 表示v if條件不成立時執行 else if...