【问题标题】:Use HTML inside vuetify v-text-field props在 vuetify v-text-field 道具中使用 HTML
【发布时间】: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/

【问题讨论】:

    标签: vue.js vuetify.js


    【解决方案1】:

    如果您查看 the source codes 中的 v-text-field,您会看到它从 v-input 扩展而来,然后您会看到名为 prependappendv-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>

    【讨论】:

    • 非常感谢!我最终使用了:
    猜你喜欢
    • 2021-08-19
    • 2021-09-08
    • 2018-07-14
    • 2018-02-27
    • 2021-02-17
    • 1970-01-01
    • 1970-01-01
    • 2021-05-13
    • 1970-01-01
    相关资源
    最近更新 更多