Vue提供了一個(gè)名為“v-if”的指令，它允許我們根據(jù)條件來渲染元素。

在下面的代碼中，我們可以看到一個(gè)文本輸入框和一個(gè)div塊。當(dāng)輸入框中的內(nèi)容不為空時(shí)，div塊將顯示出來。否則，div塊將被隱藏。

<div id="app">
<input v-model="message">
<div v-if="message">
{{ message }}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>

上面的代碼中，我們使用了“v-model”指令來實(shí)現(xiàn)雙向數(shù)據(jù)綁定，它將輸入框中的值綁定到Vue實(shí)例的“message”屬性上。然后，我們使用“v-if”指令來根據(jù)“message”的值（即輸入框中的內(nèi)容是否為空）來決定是否顯示div塊。

當(dāng)然，“v-if”指令并不是唯一的條件渲染指令。Vue還提供了“v-show”指令，它的工作方式與“v-if”類似，但是它只是簡單地切換元素的CSS屬性“display”，而不是刪除或重新插入元素。因此，“v-show”指令在切換頻繁的場(chǎng)景中比“v-if”指令更加高效。