Vue.js 在Vue Select中设置选定值的样式

我正在使用vue select。在下拉列表中，有标签（不仅仅是文本）。是否也可以为选定的值添加标签

                            <div class="form-group row">
                                <label for="project_status_id"  class="col-sm-3 col-form-label">Projekt Status</label>
                                <div class="col-sm-9">
                                    <v-select  :options="resources.activeProjectStatus" :reduce="project_status_id => project_status_id.id"  v-model="form.project_status_id" label="name" id="project_status_id" placeholder="Projekt Status" :class="$vSelectStyle($v.form.project_status_id)">
                                        <template v-slot:option="option" >
                                            <div v-html="option.status_label" class="mb-1">
                                            </div>
                                        </template>
                                    </v-select>
                                    <template v-if="$v.form.project_status_id.$error">
                                        <p class="text-danger" v-if="!$v.form.project_status_id.required">
                                            Projekt - Status ist erforderlich!
                                        </p>
                                    </template>
                                </div>
                            </div>

项目状态

Projekt-状态是erforderlich！

---

假设您想要

状态标签的HTML，也假设
状态标签是模板字符串或类似内容，则使用
所选选项
插槽，插槽的内容与您的选项插槽相同，而不附加
类

如前所述，下面示例中的关键部分是
选定选项
插槽：



下面的示例是对答案进行修改的一个分支


Vue.config.productionTip=false；
Vue.component（'v-select'，VueSelect.VueSelect）；
新Vue({
el:“#应用程序”，
数据：{
选项：[
{
姓名：`Foo`
},
{
姓名：`巴`
},
{
姓名：`Baz`
}
]
}
});
正文{
字体系列：“Source Sans Pro”、“Helvetica Neue”、Arial、Sans serif；
}
h1{
字号：26px；
字号：600；
颜色：#2c3e5099；
文本呈现：优化易读性；
-moz osx字体平滑：灰度；
-moz文本大小调整：无；
}
#应用程序{
最大宽度：30em；
保证金：1em自动；
}

Vue选择
如果它不具备此功能，您肯定可以在您所谈论的标签中添加一个新类，并根据所选内容添加一些逻辑来更改它。