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>标签) 上。
