API 浏览器
无服务器渲染

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

¥The QNoSsr component makes sense only if you are creating a SSR website/app.

它避免在服务器上渲染其内容,而只将其留给客户端。当你的代码非同构且只能在客户端(浏览器)运行时很有用。

¥It avoids rendering its content on the server and leaves that for client only. Useful when you got code that is not isomorphic and can only run on the client side, in a browser.

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

¥Alternatively, you can also use it to render content only on server-side and it automatically removes it if it ends up running on a client browser.

Loading QNoSsr API...

用法(Usage)

¥Usage

基本(Basic)

¥Basic

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

多个客户端节点(Multiple client nodes)

¥Multiple client nodes

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

带有标签属性的多个客户端节点(Multiple client nodes with tag prop)

¥Multiple client nodes with tag prop

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

占位符属性(Placeholder property)

¥Placeholder property

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

占位符槽(Placeholder slot)

¥Placeholder slot

<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>

占位符槽中的多个内容(Multiple content in placeholder slot)

¥Multiple content in placeholder slot

<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>

仅占位符(Only placeholder slot)

¥Only placeholder slot

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