Vue2 v-if 与 v-else-if 双条件渲染问题

在 Vue2 中使用 v-if 和 v-else-if 进行条件渲染时，当条件中包含多个 && 条件运算符时可能无法正确渲染。

问题症状

• 当只有一个条件时，v-if 渲染成功；
• 当有两个 & 条件时，始终执行 v-else 渲染。

问题原因

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

立即学习“前端免费学习笔记（深入）”；

只有以下两种可能：

• msg_unit 或 msg_unit_action 的值不正确。
• { item.msg_unit == '参与人' } 中的值为 falsy。

解决方案

1. 检查 item 对象：在 Vue Inspector 或 console 中输出 item 对象来检查每个属性值是否正确。
2. 检查特殊值：某些值，如 null、undefined、NaN 和空的字符串，会被判定为 falsy。确保 msg_unit 和 msg_unit_action 的值不是这些值。