溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天開始學習Vue.js的使用，但是在學習過程中發現一個問題，那就是頁面加載數據時，原始代碼會閃現一下。查訪各方資料，終的解決方法。
第一步、加入一段css代碼
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
第二步、在view上引用css模塊
<div id="app" v-cloak>
<h2>{{message}}</h2>
<h2>{{name}}</h2>
</div>
注意，有的文章說，在具體數據部分加入v-cloak，但是這樣太麻煩，每一個數據顯示都要加，所以直接加載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>
<h2>{{message}}</h2>
<h2>{{name}}</h2>
</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>
以上這篇解決使用Vue.js顯示數據的時,頁面閃現原始代碼的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
