チュートリアルの基本的な使用のVueシリーズ(2)V-マント、V-テキスト、V-HTMLの

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としてレンダリングされます:
ここに画像を挿入説明

おすすめ

転載: www.cnblogs.com/lauyon/p/12288108.html