为什么捐赠
API 探索器
无 SSR

只有在创建 SSR 网站/应用时,QNoSsr 组件才有意义。

它避免在服务器上渲染其内容,并将其留给客户端。当您遇到无法进行同构并且只能在客户端(浏览器中)运行的代码时,这很有用。

或者,您也可以使用它仅在服务器端渲染内容,如果最终在客户端浏览器上运行,它会自动将其删除。

正在加载 QNoSsr API...

使用

基础

<q-no-ssr>
  <div>This won't be rendered on server</div>
</q-no-ssr>

多个客户端节点

<q-no-ssr>
  <div>This won't be rendered on server.</div>
  <div>This won't either.</div>
</q-no-ssr>

带 tag 属性的多个客户端节点

<q-no-ssr tag="blockquote">
  <div>This won't be rendered on server.</div>
  <div>This won't either.</div>
</q-no-ssr>

占位符属性

<q-no-ssr placeholder="Rendered on server">
  <div>This won't be rendered on server</div>
</q-no-ssr>

占位符插槽

<q-no-ssr>
  <div>This won't be rendered on server</div>
  <template v-slot:placeholder>
    <div>Rendered on server</div>
  </template>
</q-no-ssr>

占位符插槽中的多个内容

<q-no-ssr>
  <div>This won't be rendered on server</div>
  <template v-slot:placeholder>
    <div>Rendered on server (1/2)</div>
    <div>Rendered on server (2/2)</div>
  </template>
</q-no-ssr>

仅占位符插槽

<q-no-ssr>
  <template v-slot:placeholder>
    <div>Rendered on server</div>
  </template>
</q-no-ssr>