使用 vuetify 动态构建 html 颜色增强列表

Question

我有这个代码

     <div class="row form-group" v-for="(author, key) in authorData" :key="key">
            <v-layout row wrap>
              <v-flex xs1 sm1 md1 text-xs-center>                   
                <div>
                  <v-checkbox
                    label
                    :key="author.PmPubsAuthorID"
                    v-model="authorData[key].checked"
                    v-bind:id="author.PmPubsAuthorID.toString()"
                    color="success"
                    @change="authorCBClicked(authorData[key])"
                  ></v-checkbox>                 
                </div>
                <!-- </v-card-text>
                </v-card>-->
              </v-flex>
              <v-flex xs10 sm10 md10>
                <v-card>
                  <v-card-text class="px-0">
                    <b>Author:</b>
                    <template v-if="author.Last_Name">{{' ' + author.Last_Name +' '}}</template>
                    <template v-if="author.Initials">{{author.Initials + ' '}}</template>
                    <template>
                      <br />
                      <b>Program:</b>
                      <b>
                        <font color=" + author.color + ">{{' ' + author.ProgramCode}}</font>
                      </b>
                    </template>
                    <br />
                    <template v-if="author.Affiliation">
                      <b>Affiliation:</b>
                      {{' ' + author.Affiliation}}.
                    </template>
                    <br />
                  </v-card-text>
                </v-card>
              </v-flex>
              <v-flex xs1 sm1 md1 text-xs-center>                    
              </v-flex>
            </v-layout>
          </div>

在一个 .我正在循环中构建元素，我希望 Program_Code 以分配给该程序的颜色显示。每个单独的程序都是不同的。我在HTML in a Vuetify v-dialog 发布了一个类似的问题，它在 HTML 格式的不同领域对我有很大帮助 但这是一个不同的问题。如何让 author.ProgramCode 具有字体颜色？我是否需要在动态数组中的另一个 StackOverflow 踏板上构建答案？或者更接近Dynamic v-model don't complete inputs using v-html directive

谢谢

Answer 1

如果目标是使用 Boussadjra 提到的提供的数据显示文本，那么您可以执行以下操作（在 Vue 中，您可以将样式绑定到对象。这就是代码正在做的事情）：

<span v-bind:style="{ color: author.color }">{{' ' + author.ProgramCode}}</span>

请注意，HTML5 不支持字体标签。