レンダリング終了までマスタッシュ構文を非表示にするv-cloak

date

Mar 7, 2023

repo_url

slug

vcloak

status

Published

summary

type

Post

thumbnail_url

tags

vue

outer_link

マスタッシュ構文は、HTMLが読み込まれた後ブラウザで動作するJavaScriptによって値が埋め込まれる。

場合によっては値が埋め込まれるまでの一瞬の間にマスタッシュ構文がそのまま表示されてしまうことがある。

これを防ぎたい場合にv-cloakディレクティブを利用する。

<script setup lang="ts">
import {ref} from "vue";

const hello = ref("こんにちは!");
</script>

<template>
	<p v-cloak>{{hello}}</p>
</template>

<style>
[v-cloak] {
	display: none;
}
</style>

上記のコードでは、

pタグのv-cloakはマスタッシュ構文のレンダリングが終了したタイミングで取り除かれるため、

[v-cloak]のcssもそれと同時に適用されなくなり表示される、という仕組みになっている。