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标签时,我们就不需要再通过{{}}获取元素值。