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