如何在 v-btn Vuetify 中添加两行

Question

我正在尝试在 Vuetify 中向 v-btn 文本添加第二行：

<v-btn>
    <span class="first-line">hello</span>
    <span class="second-line">world</span>
</v-btn>

但是，它不起作用并显示在一行中！ 请帮助我。

Answer 1

按钮上的两行文本违反了 Material Design（Vuetify 的基础）原则，因为它们降低了易读性。材料设计文档可以在这里找到 - 滚动到子标题“文本标签”。

Answer 2

您可以使用

<br />

标签，如下所示：

<v-btn>
    <span class="first-line">hello</span><br />
    <span class="second-line">world</span>
</v-btn>

Answer 3

对于任意数量的行：

<v-btn>
  <template v-for="e in ['one','two','three','four']">
    {{ e }}
    <br/>
  </template>
</v-btn>