从 Vue 应用程序的容器元素渲染 HTML

<div id="paid-content">
  <h2>如果您已登录，则应看到以下内容</h2>
</div>

import PaidContent from './PaidContent.vue'
createApp(PaidContent).mount('#paid-content')

<script lang="ts">
export default {
    methods: {
        getUser() {
            return "bob"
        },
    }
}
</script>

<template>
    <template v-if="getUser() !== null">
        您已登录！
        <slot></slot>
    </template>
    <template v-else>
        Please sign in.
    </template>
</template>

<script lang="ts">
export default {
  props: {
    // here
    paidContentHtml: {
      required: true,
      type: String,
    },
  },
  methods: {
    getUser() {
      return "bob";
    },
  },
};
</script>

<template>
  <template v-if="getUser() !== null">
    You are signed in!

    <!-- Render it here -->
    <div v-html="paidContentHtml"></div> 
  </template>
  <template v-else> Please sign in. </template>
</template>

import { createApp } from "vue";
import PaidContent from "./PaidContent.vue";

const $paidContent = document.querySelector("#paid-content")?.innerHTML;

createApp(PaidContent, {
  paidContentHtml: $paidContent,
}).mount("#paid-content");

Html相关问答推荐

如何改进这个jQuery滑动器的功能？

如何更改计时器S输入的Angular 字体大小？

渐变进度条位置

如何将功能附加到嵌入式药剂中的按钮？

有没有一种方法可以很容易地将这个div从底部：0转换到顶部：0？

如何从elementor中的滑块中获取文本？

列表项文本在占据剩余空间之前在标记下换行

如何使背景图像在面包屑中相互重叠

根据Tailwind CSS中的子计数而非子宽度进行对齐，并水平对齐

视频重新加载而不是在 Swift 中暂停 WKWebView

Web 组件 #shadow-root css 泄漏到文档

如何使用javascript在jsx中重复插入特殊字符？

如何使用CSS将页面标题水平居中对齐

为什么 css position：fixed 不适用于对话框标签？

透明渐变凹矩形

将表格标题和过滤器调整到表格的顶部边缘

使用 TailwindCSS 将徽标放在左上角，将菜单放在右上角

如何向上移动图像并溢出图像的一部分而另一部分不溢出

沿文本对齐双引号

为什么浏览器在 Select 一个包裹在 标签中的块级元素后包含相邻元素？