仅限服务器端渲染的`<server-only>`标签
<p>我有一些代码只需要在客户端渲染，因此我将它包裹在<code><client-only></code>标签中。</p>
<p>然而，为了防止内容跳动，我尝试只在服务器端渲染元素，使用了以下代码：</p>
<pre class="brush:php;toolbar:false;"><div v-if="$isServer" class="h-nonav bg-gray-500" /></pre>
<p>这样确实可以工作，但Vue会抱怨服务器端的HTML与客户端的不一致。</p>
<p>这样做虽然有效，但听起来有点hackish，并且会导致页面渲染两次：</p>
<pre class="brush:php;toolbar:false;"><div v-if="ssr" class="h-nonav bg-gray-500" />
...
data() {
return {
ssr: true
}
},
mounted() {
this.ssr = false
},</pre>
<p>尝试搜索文档，但没有找到<code><server-only></code>标签 :(</p>
1
674
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
没关系，使用
v-show代替v-if修复了它：希望这将再次帮助我解决问题...