如何在 Vuetify 文本字段中上标标签答案

【问题标题】：How to superscript a label in Vuetify textfield如何在 Vuetify 文本字段中上标标签
【发布时间】：2021-01-13 21:14:35
【问题描述】：

我使用 Vuetify。我喜欢在标签中包含文本“目标平方米”

我尝试使用<sup>2</sub>，但它不起作用

<v-text-field 
  label="Target (in m<sup>2</sup>)"
   v-model="form.target" :error-messages="errors.target" > 
</v-text-field>

如何在标签中添加上标？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

您可以使用命名槽 label ：

<v-text-field  v-model="form.target" :error-messages="errors.target" >
   <template #label>
      <label>Target (in m<sup>2</sup>)</label>
   </template>
 </v-text-field>

请查看example

PS : #label 是 v-slot:label 的简写

【讨论】：

【解决方案2】：

@Boussadjra Brahim 的回答是正确的，但我们需要在 v-text-field 中定义 label 属性，否则插槽中定义的标签会消失。

所以正确的方法如下

<v-text-field 
  label="Target"
  v-model="form.target"
  :error-messages="errors.target"
>
  <template v-slot:label>
    Target (in m<sup>2</sup>)
  </template>
</v-text-field>

我希望答案是有帮助的，感谢 jacekkarczmarczyk

【讨论】：