今天開始學習Vue.js的使用，但是在學習過程中發(fā)現(xiàn)一個問題，那就是頁面加載數(shù)據(jù)時，原始代碼會閃現(xiàn)一下。查訪各方資料，終的解決方法。
第一步、加入一段css代碼
<style type="text/css"> [v-cloak] { display: none; } </style> 第二步、在view上引用css模塊
<div id="app" v-cloak> <h1>{{message}}</h1> <h1>{{name}}</h1> </div> 注意，有的文章說，在具體數(shù)據(jù)部分加入v-cloak，但是這樣太麻煩，每一個數(shù)據(jù)顯示都要加，所以直接加載view大模塊上，就能解決問題了。
第三步、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"> //模型數(shù)據(jù)Model var exeData = { message : "Hello World", name:"我是Vue" }; //View實例，也就是View-Model(VM) new Vue({ el : "#app", data : exeData }) </script> </html> 以上這篇解決使用Vue.js顯示數(shù)據(jù)的時,頁面閃現(xiàn)原始代碼的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
