插值表达式闪烁,网络慢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>