溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

解決使用Vue.js顯示數(shù)據(jù)的時(shí),頁(yè)面閃現(xiàn)原始代碼的問題

發(fā)布時(shí)間：2020-10-03 15:35:02 來源：腳本之家 閱讀：175 作者：kandee 欄目：web開發(fā)

今天開始學(xué)習(xí)Vue.js的使用，但是在學(xué)習(xí)過程中發(fā)現(xiàn)一個(gè)問題，那就是頁(yè)面加載數(shù)據(jù)時(shí)，原始代碼會(huì)閃現(xiàn)一下。查訪各方資料，終的解決方法。

第一步、加入一段css代碼

<style type="text/css"> 
  [v-cloak] { 
    display: none; 
  } 
</style>

第二步、在view上引用css模塊

<div id="app" v-cloak> 
  <h2>{{message}}</h2> 
  <h2>{{name}}</h2> 
</div>

注意，有的文章說，在具體數(shù)據(jù)部分加入v-cloak，但是這樣太麻煩，每一個(gè)數(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> 
    <h2>{{message}}</h2> 
    <h2>{{name}}</h2> 
  </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實(shí)例，也就是View-Model(VM) 
  new Vue({ 
    el : "#app", 
    data : exeData 
  }) 
</script> 
</html>

以上這篇解決使用Vue.js顯示數(shù)據(jù)的時(shí),頁(yè)面閃現(xiàn)原始代碼的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手