解決使用Vue.js顯示資料的時，頁面閃現原始程式碼
阿新 • • 發佈：2018-12-02
今天開始學習Vue.js的使用，但是在學習過程中發現一個問題，那就是頁面載入資料時，原始程式碼會閃現一下。查訪各方資料，終的解決方法。
第一步、加入一段css程式碼
<style type="text/css">
[v-cloak] {
display: none;
}
</style>第二步、在view上引用css模組
注意，有的文章說，在具體資料部分加入v-cloak，但是這樣太麻煩，每一個數據顯示都要加，所以直接載入view大模組上，就能解決問題了。<div id="app" v-cloak> <h1>{{message}}</h1> <h1>{{name}}</h1> </div>
第三步、js部分沒有變化
<script type="text/javascript">
var exeData = {
message : "Hello World",
name:"我是Vue"
};
new Vue({
el : "#app",
data : exeData
})
</script>下面貼上完整程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js Demo</title> <style type="text/css"> [v-cloak] { display: none; } </style> </head> <body> <!--這是View --> <div id="app" v-cloak> <h1>{{message}}</h1> <h1>{{name}}</h1> </div> </body> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> //模型資料Model var exeData = { message : "Hello World", name:"我是Vue" }; //View例項，也就是View-Model(VM) new Vue({ el : "#app", data : exeData }) </script> </html>