我在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的数组项,里面的数据都是正确的。
只可能是
msg_unit
或者msg_unit_action
的值有问题,可以在外部输出一下item
整个对象出来看看各个属性值是否正确。