使用 vueitify 动态构建 html 颜色增强列表 [英] dynamically build a html color enhanced list using vueitify

问题描述

我有这个代码

 
<v-layout row wrap><v-flex xs1 sm1 md1 text-xs-center><div><v-复选框标签:key="author.PmPubsAuthorID"v-model="authorData[key].checked"v-bind:id="author.PmPubsAuthorID.toString()"颜色=成功"@change="authorCBClicked(authorData[key])"></v-checkbox>
<!-- </v-card-text></v-card>--></v-flex><v-flex xs10 sm10 md10><v-card><v-card-text class="px-0"><b>作者:</b><template v-if="author.Last_Name">{{' ' + author.Last_Name +' '}}</template><template v-if="author.Initials">{{author.Initials + ' '}}</template><模板><br/><b>程序:</b><b><font color=" + author.color + ">{{' ' + author.ProgramCode}}</font></b></模板><br/><模板 v-if="author.Affiliation"><b>隶属关系:</b>{{' ' + author.Affiliation}}.</模板><br/></v-card-text></v-card></v-flex><v-flex xs1 sm1 md1 text-xs-center></v-flex></v-layout>

在一个 .我正在循环中构建元素，并且我希望 Program_Code 以分配给该程序的颜色显示.每个单独的程序都不同.我在 Vuetify 虚拟对话框中的 HTML但这是一个不同的问题.我怎样才能让 author.ProgramCode 有字体颜色?我是否需要在动态数组中的另一个 StackOverflow 踏板上构建答案?或更接近 动态 v-model 不完成输入使用 v-html 指令

谢谢

解决方案

如果目标是使用 Boussadjra 提到的提供的数据显示文本，那么您可以执行以下操作(在 Vue 中，您可以将样式绑定到对象.这个是代码在做什么):

{{' ' + author.ProgramCode}}</span>

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

I have this code

     <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>

inside a . I am building the elements in the loop and I would like to have the Program_Code display in the color that is assigned to that program. Each separate program is different. I posted a simular question that help me greatly in a different area with HTML formating at HTML in a Vuetify v-dialog but this is a different problem. How can I get the author.ProgramCode to have the font color? Do I need to build what was the answer on the other StackOverflow tread in a dynamic array? or closer to Dynamic v-model don't complete inputs using v-html directive

Thanks

解决方案

If the goal is to show the text using data provided as Boussadjra mentioned, then you can do the following (In Vue, you can bind style to objects. This is what the code is doing):

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

Note that the font tag is not supported by HTML5.

这篇关于使用 vueitify 动态构建 html 颜色增强列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！