加载时隐藏v-html元素，待HTML渲染完成后再显示容器

要实现仅在HTML渲染完成后才显示容器，有两种常用方案，可根据你的场景选择：

方案一：基于数据加载状态控制显示 #

如果store.detailHTML是异步获取的（比如从接口请求），直接通过v-if判断数据是否存在，只有当数据加载完成后才渲染容器：

<div v-if="store.detailHTML" v-html="store.detailHTML"></div>

原理：当store.detailHTML为空或未加载完成时，v-if会移除整个DOM节点，不会显示任何内容；等数据获取完成后，才会创建节点并执行v-html渲染。

方案二：等待DOM渲染完成后显示 #

如果store.detailHTML本身已经存在，但渲染复杂HTML需要时间，可以通过监听数据变化+$nextTick等待DOM更新完成后再显示：

1. 在组件中添加状态变量和监听逻辑：

export default {
  data() {
    return {
      isHTMLRendered: false
    }
  },
  watch: {
    'store.detailHTML'(newVal) {
      if (newVal) {
        // 等待Vue完成v-html的DOM渲染
        this.$nextTick(() => {
          this.isHTMLRendered = true
        })
      }
    }
  }
}

2. 模板中用v-show控制显示：

<div v-show="isHTMLRendered" v-html="store.detailHTML"></div>

原理：$nextTick会在当前DOM更新周期结束后执行回调，确保v-html已经完成HTML解析和DOM插入，此时再显示容器就不会看到未渲染的纯文本。

如果需要更平滑的过渡效果，可以给容器添加CSS过渡样式：

.detail-container {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.detail-container.show {
  opacity: 1;
}

然后把v-show改成动态绑定class：

<div :class="{ 'detail-container': true, 'show': isHTMLRendered }" v-html="store.detailHTML"></div>

内容的提问来源于stack exchange，提问作者Ballazx