插值表達式閃爍,網絡慢vue先顯示花括號變量名
使用Vue的插值表達式有個坑，就是當網絡加載慢的時候，Vue.js還沒加載到瀏覽器來，如下代碼：
<body>
<div id="app">
<p>{{ msg }}</p>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
msg:'123'
}
})
</scirpt>
會先顯示
{{ msg }}
再顯示
123
這樣的用戶體驗感肯定是不好的，有如下解決方案：
解決辦法一：使用Vue的v-cloak指令：
<style>
[v-cloak]{
display:none;
}
</style>
<body>
<div id="app">
<p v-cloak>{{ msg }}</p>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
msg:'123'
}
})
</scirpt>
完美解決！
解決辦法二：使用Vue的v-text指令：
<body>
<div id="app">
<p v-text>{{ msg }}</p>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
msg:'123'
}
})
</scirpt>