【Vue.js】{{ … }} を表示させない(v-cloak)

Javascript用フレームワーク「Vue.js」で画面表示時に {{ … }} を表示しないようにする方法をソースコード付きでまとめました。

画面表示時に {{ … }} を表示しない(v-cloak)
サンプルコード

画面表示時に {{ … }} を表示しない(v-cloak)

Javascript用フレームワーク「Vue.js」では、v-cloak属性で画面表示時に {{ … }} を表示しないようにできます。
※何もしないと、画面を開いた際に {{ … }} が一瞬だけ表示されてしまいます。

サンプルコード

サンプルプログラムのソースコードです。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<!-- Vue.js の読み込み -->
<pre title="https://cdn.jsdelivr.net/npm/vue"></pre>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div id="app">
  <button onclick="location.reload()">更新</button>
  <div>宝具: <span v-cloak>{{ treasure }}</span></div>
</div>

<pre title="./js/main.js"></pre>
</body>
</html>

./js/main.js

window.setTimeout(function() {
    var app = new Vue({
        el: '#app',
        data: { treasure: 'Excalibur' }
    });
}, 1000);

./css/style.css

[v-cloak] { display: none }

v-cloak属性が指定された要素に対して、CSSで「display: none」を設定します。
Vue のレンダリングが終わると、自動的に「display: none」が解除されます。
※サンプルコードでは、1秒だけVueの処理実行を遅延させています。

## 関連ページ

【Vue.js入門】使い方・サンプル集

Vue.jsの使い方を入門者向けにサンプルコード付きでまとめました。

【TypeScript入門】使い方まとめ

TypeScriptの基礎文法、使い方について入門者向けにまとめました。

WEB開発入門速報 |