Vue使用——v-for循环里面使用v-if判断显示数据

背景

• 前端遍历一个对象数组，遍历对象的某个元素时需要根据不同的值显示不同的效果，这里外层采用v-for遍历数组，元素值使用v-if进行值判断。

代码

<div
    id="unSubmit"
    v-show="unSubmits != undefined && unSubmits.length != 0"
    v-for="data in this.unSubmits"
    :key="data.id"
>
    <div class="pulloff-show">
        <span class="">资源类型：</span><span class="warning-value">{{ data.resourcesType }}</span>
        <br />
        <span class="">工单操作类型：</span>
        <span class="warning-value">
            <el-tag v-if="data.resourcesType == 1">新增</el-tag>
            <el-tag v-if="data.resourcesType == 2">修改</el-tag>
            <el-tag v-if="data.resourcesType == 3">删除</el-tag>
        </span>
        <br />
    </div>
</div>

扩展

• 我们在使用v-for遍历一个数组对象时，内部需要使用{{XXXX}}获取元素值
• 但是如果使用v-if标签时，我们就不需要再通过{{}}获取元素值。