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

我在vue2中用v-if条件渲染不同的div元素。当v-if中的只有一个判断条件时渲染是正常的，但是有两个&&条件时就条件渲染不成功了（总是执行渲染v-else下的div元素）。这是为什么呢？贴下代码：

                            <!--这里根据条件渲染不同的消息头部-->
                            <div class="msgcard-content-header" v-if="item.msg_unit == '添加参与人'">
                                <span class="msgcard-content-header-name">{{item.msg_sender_name}}</span>
                                <span class="cut-text" style="font-size:1rem;">邀请你加入到任务的参与人中</span>
                                <el-badge style="position:absolute;right:0;" is-dot></el-badge>
                            </div>
                            <div class="msgcard-content-header" v-else-if="item.msg_unit == '参与人' && item.msg_unit_action == '删除'">
                                <span class="msgcard-content-header-name">{{item.msg_sender_name}}</span>
                                <span class="cut-text" style="font-size:1rem;">将你从参与人中移除</span>
                                <el-badge style="position:absolute;right:0;" is-dot></el-badge>
                            </div>
                            <div class="msgcard-content-header" v-else-if="item.msg_unit == '负责人' && item.msg_unit_action == '添加'">
                                <span class="msgcard-content-header-name">{{item.msg_sender_name}}</span>
                                <span class="cut-text" style="font-size:1rem;">给你分配了任务</span>
                                <el-badge style="position:absolute;right:0;" is-dot></el-badge>
                            </div>
                            <div class="msgcard-content-header" v-else>
                                <span class="msgcard-content-header-name">{{item.msg_sender_name}}</span>
                                <span class="cut-text" style="font-size:1rem;">将你从参与人中移除</span>
                                <el-badge style="position:absolute;right:0;" is-dot></el-badge>
                            </div>

item是dataList的数组项，里面的数据都是正确的。