技術標籤：Vuevue.js

插值表示式與v-text使用區別

插值表示式{{}}

插值表示式{{內容}}用作將模型資料插入到頁面當中。因形似八字鬍英文Mustache。

使用插值表示式中若遇見頁面重新整理頻繁以及網速較慢的情況，會導致頁面載入Vue.js而來不及渲染。先出現{{msg}}，再閃過後再完成資料渲染。

<div id="app">
        <div>{{msg}}</div>
    </div>
    <script src="js/vue.js"></script>
 

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:'牛轉乾坤'
            }
        })
    </script>

解決此現象，Vue提供內建屬性v-cloak。這個指令保持在元素上直到關聯例項結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，可以隱藏未編譯的 Mustache 標籤直到例項準備完畢。

[v-cloak]{
            display
 
:none;
        }

 <div id="app">
        <div v-cloak>{{msg}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:'牛轉乾坤'
            }
 

        })
    </script>

簡單專案可使用v-cloak解決螢幕閃動，工程化專案中用到webpack、vue-router一般不會有此問題。

v-text

Vue.js提供指令v-text可以實現相同效果。更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

<div id="app">
    <div v-cloak>{{msg}}</div>
    <div v-text="msg"></div>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:'牛轉乾坤'
        }
    })
</script>

且網速調慢不會出現閃動現象，而此時會出現疑問為什麼有兩個實現功能相同的命令出現。

通過以下程式碼回答：

<div id="app">
    <div v-cloak>Vue的基礎:{{msg}}</div>
    <div v-text="msg">Vue的基礎</div>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:'牛轉乾坤'
        }
    })
</script>

區別：

插值表示式將Vue傳遞的資料與自定義資料結合渲染，v-text只渲染Vue傳遞過來的資料，會替換掉節點內已有內容。根據需求判斷是否需要選擇同時展示

做個題來鞏固一下:
關於插值表示式和v-text描述正確的是:【 】
A、插值表示式可以用在元素的屬性節點
B、用v-cloak指令是解決插值表示式存在閃爍的問題
C、v-text不會覆蓋元素內已有的內容
D、v-text中不能使用三元表示式