Vue.jsのお勉強。
通常、何も指定しないでマスタッシュタグを表示すると、「{{･･･}}」が一瞬（Vueのインスタンスがコンパイルされるまで）表示されます。
これを回避するため、タグに「v-cloak」ディレクティブを指定し、CSSで display:none を設定します。これで、コンパイルが完了するまでの間、マスタッシュタグを非表示にすることが可能です。
具体的にはこんな感じ。
サンプル
以下、ソースです。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css"/>
<meta charset="utf-8"/>
<title>VueJS</title>
</head>
<body>
<div id="app">
<p>※5秒後に名前を表示します。</p>
<ul>
<li>v-cloak あり : <span v-cloak>{{name}}</span></li>
<li>v-cloak なし : <span >{{name}}</span></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
[v-cloak] {
display: none;
}
JavaScript
window.setTimeout(function() {
var app = new Vue({
el: "#app",
data: {
name: "太郎",
},
})
},5000);
コメント