如何在 vue/ionic4 中显示 html答案

【问题标题】：How to show html in vue/ionic4如何在 vue/ionic4 中显示 html
【发布时间】：2019-01-30 23:47:50
【问题描述】：

我正在使用 Vue 尝试新的 Ionic_beta。
在一个组件中，我有一个显示一些 html 的模板。
如果我将包含 html 的 <div> 放在 <ion-content> 指令中，则不会显示 html。如果我省略了<ion-content>，则会显示 html，但现在带有 html 的面板不可滚动。

html 显示，不可滚动.....

<template>
  <div>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Over TRINL</ion-title>
            </ion-toolbar>
        </ion-header>
        <div class="padding">
          <div v-html="legacySystemHTML"></div>
        </div>
    </div>
</template>

html 未显示

<template>
  <div>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Over TRINL</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <div class="padding">
              <div v-html="legacySystemHTML"></div>
            </div>
        </ion-content>
    </div>
</template>

【问题讨论】：

标签： vue.js ionic4

【解决方案1】：

如果<ion-header> 和<ion-content> 不是<ion-app> 的直接子级（例如为了符合Vue 组件要求只有1 个根元素），您应该将它们包装在一个带有class="ion-page" 的元素中，因此在您的案例：

<template>
  <div class="ion-page"> <!-- apply the "ion-page" class -->
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Over TRINL</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="padding">
        <div v-html="legacySystemHTML"></div>
      </div>
    </ion-content>
  </div>
</template>

另请参阅：ion-content won't show when using Ionic core 4

示例：https://plnkr.co/edit/ylz2jxIFjgUym98gyKeR?p=preview（没有 Vue）

【讨论】：