在 vuetify v-text-field 道具中使用 HTML

Posted 2023-02-16

【中文标题】在 vuetify v-text-field 道具中使用 HTML

【英文标题】：Use HTML inside vuetify v-text-field props

【发布时间】：2019-02-09 18:56:13

【问题描述】：

我想在 vuetify 的 v-text-field 标签和后缀中使用一些 html 标签（sup、sub），但是下面的不行。有什么方法可以实现吗？

<v-text-field :label='mylabel' :suffix='mysuffix'></v-text-field>

new Vue(
  el: '#app',
  data: 
    mylabel: 'A<sub>s</sub>',
    mysuffix: 'mm<sup>2</sup>',

  ,
);

https://jsfiddle.net/63t082p2/489/

【参考方案1】：

如果您查看 the source codes 中的 v-text-field，您会看到它从 v-input 扩展而来，然后您会看到名为 prepend 和 append 的 v-input has two slots （不知道为什么这两个插槽不在 Vuetify 指南中，您可能想issue one feature request）。您可以使用这两个插槽来实现如下演示的目标：

或者你想试试another slot named label。

new Vue(
  el: '#app',
  data: 
    mylabel: 'Test Label',
    mysuffix: 'Test suffix',
  ,
);

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.1.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.1.14/dist/vuetify.min.js"></script>

<v-app id="app">
  <v-text-field :label='mylabel' :suffix='mysuffix'>
    <template slot="prepend"><i>Label: <sub>mylabel</sub></i></template>
    <template slot="append"><i>Suffix: <sub>mylabel</sub></i></template>
  </v-text-field>
</v-app>

【讨论】：

非常感谢！我最终使用了：