一. v-if
在字符串模板中,如Handlebars ,我們得像這樣寫一個條件塊
在vue.js使用v-if實現同樣的功能
# 在中配合v-if條件渲染一整組中配合v-if條件渲染一整組?<template> 中配合 v-if條件渲染一整組
<template v-if="ok">
<p>哈哈哈哈</p>
<h1>我要優秀</h1>
</template>
最終渲染結果不會包含<template>元素
# 你可以使用v-else指令來表示v-if的“else 塊”
v-else元素必須緊跟在v-if或者v-else-if元素的后面——否則它將不會被識別。
2.1.0 新增
v-else-if,顧名思義,充當v-if的“else-if 塊”。可以鏈式地使用多次:
如果兩個元素不需要服用,獨立的
沒有添加key值的標簽仍然會被高效服用
如上例的<lable>
二. v-show
根據條件展示的內容,類似于v-if
<p v-show="ok>Hello!!! </p>
v-show的不同處在于該標簽會一直存在于DOM中并被渲染,只是根據條件判斷是否顯示,
切換display屬性的值
注意: v-show不支持<template>和v-else語法
三.v-ifvsv-show
v-if是“真正的”條件渲染,因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
一般來說,v-if有更高的切換開銷,而v-show有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用v-show較好;如果在運行時條件不太可能改變,則使用v-if較好。
四.v-if與v-for一起使用
v-for具有比v-if更高的優先級。