仅当您创建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>
Placeholder属性
<q-no-ssr placeholder="Rendered on server">
<div>This won't be rendered on server</div>
</q-no-ssr>
Placeholder插槽
<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>
在placeholder插槽中含有多个内容
<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>
仅placeholder插槽
<q-no-ssr>
<template v-slot:placeholder>
<div>Rendered on server</div>
</template>
</q-no-ssr>