样式显示问题---没有值应隐藏样式
问题描述
这儿没有值,应该不显示样式的。
错误原因:直接判断分割字符串后的值。
原代码:
<el-tag
class="elTag"
v-for="(tagItem,index) in item.specialDocument.f_special_document_label.split(',') ? item.specialDocument.f_special_document_label.split(',') : undefined"
v-if="item.specialDocument.f_special_document_label != null"
:key="index"
@click="goToList('tag', tagItem)"
type="warning"
>{{ tagItem }}</el-tag>
解决方法
方法一:先判断再分割
应该先判断是否有值,有值后再分割字符串。
代码如下:
<el-tag
class="elTag"
v-for="(tagItem,index) in item.specialDocument.f_special_document_label ? item.specialDocument.f_special_document_label.split(',') : undefined"
v-if="item.specialDocument.f_special_document_label != null"
:key="index"
@click="goToList('tag', tagItem)"
type="warning"
>{{ tagItem }}</el-tag>
方法二:放在template标签中
将其放在template中,此标签只显示其里面的东西,若没有就不展示。
在template中,即使v-for="(tagItem,index) in item.specialDocument.f_special_document_label.split(',') ? item.specialDocument.f_special_document_label.split(',') : undefined"
这样写也没关系,但是最好不要这样写。
代码如下:
<template v-if="item.specialDocument.f_special_document_label">
<el-tag
class="elTag"
v-for="(tagItem,index) in item.specialDocument.f_special_document_label ? item.specialDocument.f_special_document_label.split(',') : undefined"
:key="index"
@click="goToList('tag', tagItem)"
type="warning"
>{{ tagItem }}</el-tag>
</template>
正确样式: