方法一

v-if判断后用标签改变样式(特定显示列字体加粗)

<v-list dense>
                      <template v-for="(col,i) in cols">
                        <v-list-item :key="i" v-if="col.text=='商品码'||col.text=='通用名称'">
                            <v-list-item-content><b>{{col.text}}</b></v-list-item-content>
                            <v-list-item-content class="align-end mystyle"><b>{{item[col['value']]}}</b>
                          </v-list-item-content>
                        </v-list-item>
                          <v-list-item :key="i" v-else>
                              <v-list-item-content>{{col.text}}</v-list-item-content>
                              <v-list-item-content class="align-end mystyle" >{{item[col['value']]}}
                              </v-list-item-content>
                          </v-list-item>
                      </template>
</v-list>

方法二

通过类选择器改变样式

<v-list dense>
                     <template v-for="(col,i) in cols">
                        <v-list-item :key="i" v-if="col.text=='商品码'||col.text=='通用名称'">
                            <v-list-item-content class="myfont">{{col.text}}</v-list-item-content>
                            <v-list-item-content class="align-end mystyle myfont">{{item[col['value']]}}
                          </v-list-item-content>
                        </v-list-item>
                          <v-list-item :key="i" v-else>
                              <v-list-item-content>{{col.text}}</v-list-item-content>
                              <v-list-item-content class="align-end mystyle" >{{item[col['value']]}}
                              </v-list-item-content>
                          </v-list-item>
                      </template>
</v-list>
<style>
    .myfont{
    font-weight:bold;
    }
</style>
  }

效果

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐