vue实现条件判断
Vue 条件判断实现方法
Vue 提供了多种方式实现条件判断，可以根据不同场景选择合适的方式。
v-if / v-else-if / v-else
这是 Vue 中最常用的条件渲染指令，根据表达式的真假值来渲染或销毁元素。
<div v-if="type === 'A'">
显示 A 类型内容
</div>
<div v-else-if="type === 'B'">
显示 B 类型内容
</div>
<div v-else>
显示其他类型内容
</div>v-show
与 v-if 不同，v-show 只是切换元素的 display CSS 属性，元素始终会被渲染。
<div v-show="isVisible">
这个元素会通过 display 属性切换显示/隐藏
</div>计算属性
对于复杂的条件逻辑，可以使用计算属性来简化模板。
computed: {
displayMessage() {
if (this.error) {
return '错误信息'
} else if (this.success) {
return '成功信息'
} else {
return '默认信息'
}
}
}方法判断
可以在方法中封装条件逻辑，然后在模板中调用。
methods: {
shouldDisplay(item) {
return item.active && !item.disabled
}
}<div v-if="shouldDisplay(item)">
条件满足时显示
</div>三元表达式
适用于简单的条件判断。
<span>{{ isActive ? '激活' : '未激活' }}</span>动态组件
结合 component 和 is 特性实现条件渲染不同组件。
<component :is="currentComponent"></component>条件渲染最佳实践
- 频繁切换显示/隐藏时使用 v-show
- 运行时条件很少改变时使用 v-if
- 复杂逻辑尽量放在计算属性或方法中
- 避免在模板中写过于复杂的条件表达式
