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標簽時，我們就不需要再通過{{}}獲取元素值。