vue v if 实现
使用 v-if 实现条件渲染
v-if 是 Vue.js 中用于条件渲染的指令，根据表达式的真假值动态添加或移除 DOM 元素。
语法：
<template>
<div v-if="condition">内容</div>
</template>示例：
<template>
<div>
<p v-if="isVisible">这段文字会根据条件显示或隐藏</p>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
}
}
}
</script>v-if 与 v-else 结合使用
可以通过 v-else 为 v-if 添加一个“else 块”，注意 v-else 元素必须紧跟在 v-if 或 v-else-if 元素后面。
<template>
<div>
<p v-if="isVisible">可见内容</p>
<p v-else>不可见时的替代内容</p>
</div>
</template>v-else-if 实现多重条件
v-else-if 用于实现多重条件判断，类似于 JavaScript 中的 else if。
<template>
<div>
<p v-if="type === 'A'">类型 A</p>
<p v-else-if="type === 'B'">类型 B</p>
<p v-else>其他类型</p>
</div>
</template>v-if 与 v-show 的区别
v-if 是“真实”的条件渲染，在切换过程中条件块内的事件监听器和子组件会被销毁和重建。如果初始条件为假，则什么也不做。
v-show 的元素始终会被渲染并保留在 DOM 中，只是简单地切换 CSS 的 display 属性。
使用场景：
- 频繁切换时使用
v-show - 运行时条件很少改变时使用
v-if
在 <template> 上使用 v-if
v-if 可以作用于 <template> 元素，用来渲染一组元素。
<template v-if="condition">
<h1>标题</h1>
<p>段落内容</p>
</template>注意事项
- 不推荐在同一元素上同时使用
v-if和v-for，因为v-for比v-if具有更高的优先级。 - 使用
key属性管理可复用的元素时，Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。 - 在组件上使用
v-if时，会触发组件的生命周期钩子（创建/销毁）。
