公司的后台管理系统前端框架是Vue2，今天发现一个数据列表页的两个互斥操作按钮“收款”和“取消收款”，同时显示在页面上了。

源码部分如下：

起初，我以为可能是数据类型的判断可能有点问题，经过调试发现不是数据类型的“锅”。

请教了一下deepseek，AI回答了几点原因，其中提到了“权限指令干扰”，v-permission 指令可能有冲突。

验证一下，果然如此！

原因呢，如下：

Vue 在渲染模板时会按照代码的顺序执行指令。如果 v-permission 在 v-show 之前解析，它将决定元素是否应该渲染（即是否应该出现在 DOM 中），之后再通过 v-show 控制其显示与隐藏。

在某些情况下，如果 v-permission 决定了元素不应该被渲染（例如权限不足），则 v-show 根本不会被执行，因为元素根本不在 DOM 中。

解决办法很简单，把v-show改为v-if 就解决了。