和JavaScript的條件語句一樣,vue的條件指令可以根據表達式的值在dom中渲染或者銷燬元素/組件,常用的條件指令有:
- v-if
- v-else-if
- v-else
其中v-if可以單獨使用,v-else-if必須緊跟v-if,v-else必須緊跟v-else-if或者v-if。當表達式的值爲true時,當前元素/組件及所有的子節點都將會被渲染,反之被移除。
如果一次判斷的是多個元素或組件,那麼可以在元素上使用條件指令,最終渲染的結果不會包含該元素。
讓我們看個實例:
<!--條件渲染指令示例-->
<template>
<div>
<template v-if="inputType === 'name'">
<label>用戶名:</label>
<input placeholder="請輸入用戶名"/>
</template>
<template v-else-if="inputType === 'mail'">
<label>郵箱:</label>
<input placeholder="請輸入郵箱"/>
</template>
<template v-else>
<label>手機號碼:</label>
<input placeholder="請輸入手機號碼"/>
</template>
<button @click="changeInputType">切換輸入類型</button>
</div>
</template>
<script>
export default {
name: "ConditionalRender",
data() {
return {
inputType: 'name'
}
},
methods: {
changeInputType: function () {
if (this.inputType === 'name') {
this.inputType = 'mail';
}
else if (this.inputType === 'mail') {
this.inputType = 'phone';
}
else {
this.inputType = 'name';
}
}
}
}
</script>
<style scoped>
label {
font-weight: bold;
}
button {
margin-left: 10px;
}
</style>
運行程序:
然後,我們點擊按鈕進行切換:
我們試着在輸入框內輸入內容,進行切換:
切換後:
我們可以發現,輸入框的內容沒有發生變化,還是我們剛開始輸入的姓名。按照我們的猜測,切換後,輸入框應該是對應的placeholder內容。
這裏設計到vue的渲染機制,在渲染元素的時候,vue出於效率的考慮,會儘可能的複用已有的元素而非重新進行渲染,所以我們就會發現上面的現象,也就是說input元素被複用了。
那麼,如果我們不希望vue複用這些元素,我們可以使用vue提供的key屬性,它可以讓我們自己決定是否複用元素,注意一點:key值必須是唯一的。
我們修改上面的代碼,爲input元素添加key屬性:
<template v-if="inputType === 'name'">
<label>用戶名:</label>
<input placeholder="請輸入用戶名" key="name-input"/>
</template>
<template v-else-if="inputType === 'mail'">
<label>郵箱:</label>
<input placeholder="請輸入郵箱" key="mail-input"/>
</template>
<template v-else>
<label>手機號碼:</label>
<input placeholder="請輸入手機號碼" key="phone-input"/>
</template>
運行程序:
切換:
好了,是不是和我們要求的一樣了呢。
另外要提的是v-show指令,該指令是改變元素的css屬性display。當v-show爲true時,元素會顯示,爲false時,元素會隱藏,dom結構中會給元素加上內聯樣式:display:none;.
示例:
<label v-show="true">我是v-show=true</label>
<label v-show="false">我是v-show=false</label>
運行程序:
我們查看下dom結構:
大家可以看到,確實和我們上面說的一樣,當v-show值爲false的時候,添加了display:none;的內聯樣式。
那麼v-if和v-show兩者都具有類似的功能,我們到底該選擇使用哪個呢?
v-show只是簡單的css屬性切換,無論其值如何,都會被編譯,相比v-show,v-if只有在條件第一次變爲真的時候纔開始編譯。
v-if更適合條件不經常改變的場景,應爲通過v-if進行切換開銷比較大,當你要頻繁進行顯示隱藏的切換時顯然v-show更加適合。