v-if 是 Vue.js 中的一個指令，用于根據表達式的真假值來有條件地渲染一個元素。當表達式為真值時，元素會被渲染；當表達式為假值時，元素及其子元素不會被渲染。

基本使用

在 Vue 的模板中，你可以使用 v-if 來控制元素的渲染：

<template>  <div>  <p v-if="showMessage">Hello, Vue!</p>  <button @click="toggleMessage">Toggle Message</button>  </div>  
</template>  <script>  
export default {  data() {  return {  showMessage: true,  };  },  methods: {  toggleMessage() {  this.showMessage = !this.showMessage;  },  },  
};  
</script>

在上面的例子中，p 元素會在 showMessage 為 true 時被渲染，為 false 時則不會被渲染。點擊按鈕會切換 showMessage 的值，從而控制 p 元素的顯示與隱藏。

與 v-else、v-else-if 一起使用

你還可以將 v-else 和 v-else-if 與 v-if 一起使用，以創建更復雜的條件渲染邏輯：

<template>  <div>  <p v-if="score >= 90">Excellent</p>  <p v-else-if="score >= 60">Good</p>  <p v-else>Poor</p>  <input type="number" v-model="score" placeholder="Enter your score">  </div>  
</template>  <script>  
export default {  data() {  return {  score: 0,  };  },  
};  
</script>

?

在這個例子中，根據 score 的值，會顯示不同的文本。

注意事項

• v-if 是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才開始渲染條件塊。
• v-if 有更高的切換開銷，而 v-show 就簡單得多——無論初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
• 一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果你需要非常頻繁地切換，則使用 v-show 較好；如果你在運行時條件不太可能改變，則使用 v-if 較好。
• 當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。這意味著 v-if 將分別重復運行于每個 v-for 循環中。當你想為僅有的一些項渲染節點時，這種優先級的設置是有用的。然而，如果你希望跳過循環中的剩余項（基于先前的條件），你應該將 v-if 置于外層元素 (或 <template> 標簽) 上。