V-マント
我々はすでに、次のように双方向の結合方法があることを知っています:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-cloak</title>
</head>
<div id="app">
<p>{{msg}}</p>
</div>
<body>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123'
}
})
</script>
</body>
</html>
効果:
ネットワークの速度を調整する:
ブラウザのF12、ネットワークを見つけ、遅い3Gに、ページ更新し
、次のように表示を:
とき、比較的低速、我々は補間式を見ることができ、この時間は、V-マントを果たしました:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-cloak</title>
<style>
/*凡是使用了v-cloak指令的标签,都设置成隐藏*/
[v-cloak]{
display: none;
}
</style>
</head>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
<body>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123'
}
})
</script>
</body>
</html>
この時間は、ページを更新するには:
要求が完了すると、値が表示されます:補間式のちらつきの問題を解決することができます
v-cloak
V-テキスト
v-text
使用します。
<p v-text="msg"></p>
v-text
任意の設定を必要としない、直接発現ちらつきの問題補間は存在しません。
以下のシナリオを考えます:
<p v-cloak>hello {{msg}}</p> <!--输出:hello 123-->
<p v-text="msg">hello</p> <!--输出:123 ("123"会将"hello"替换掉)-->
あなただけの出力に文字列をしたくない場合は、他の言葉では、文字列は、他の文字の数を周りのステッチのように使用するだろうというときv-cloak
。
あなたは出力に文字列自体、使用したい場合v-text
。
V-HTML
v-html
以下の方法を使用して、HTMLなどのコンテンツをレンダリングします:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html</title>
</head>
<div id="app">
<p v-html="msg"></p>
</div>
<body>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '<h1>我是一个h1标签</h1>'
}
})
</script>
</body>
</html>
メッセージの内容ページはHTMLとしてレンダリングされます: