Vue學習04-----v-bloak和v-html

小蝦米的成長之路發表於2019-10-25
VueHTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bloak學習</title>
    <!--放在此處會載入慢-->
    <!-- <script src="./vue.js"></script> -->
    <script>
        //只要用到了v-cloak屬性的元素都預設隱藏
        {v-cloak}{
            display:none;
        }
    </script>
</head>
<body>
    <div id="app">
        <!--v-cloak和v-text的區別
            1、預設的情況下，v-cloak有{{}}閃爍問題，v-text沒有
            2、v-cloak可以在{{message}}前後放置任意內容，並且可以輸出顯示
            3、v-text載入時先載入h4標籤元素內容，後載入指令內容，並且指令內容覆蓋元素內容
        -->
        <p v-cloak>{{ message }}</p>
        <h4 v-text="message"></h4>
        <!--
            1、msg2會把<h1>作為字串輸出，不能解析<h1>標籤
            2、v-text也是把<h1>作為字串輸出
            3、v-html會解析<h1>,能作為頁面元素輸出
                （其他特性：
                    載入時先載入頁面元素內容，後載入指令內容，並且指令內容覆蓋元素內容
                ）
        -->
        <div>{{message2}}</div>
        <div v-text="message2"></div>
        <div v-html="message2"></div>
    </div>
</body>
</html>

<!--先載入{{}}後載入資料-->
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:'message',
            message2:'<h1>我是message2</h1>'
        }
    });
</script>

 

相關文章