Question

我想在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/

Answer 1

如果您查看v-text-field的{{3}}，您会发现它从v-input延伸，然后您会看到the source codes名为 prepend 和追加（不确定为什么这两个位置不在《 Vuetify指南》中，您可能要v-input has two slots）。您可以使用这两个插槽来实现目标，如下所示：

或者您想尝试issue one feature request。

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>

在vuetify v-text-field属性中使用HTML

1 个答案: