溫馨提示×

溫馨提示×

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

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue怎么解決數(shù)據(jù)加載時插值表達式閃爍的問題

發(fā)布時間：2022-01-24 13:40:53 來源：億速云 閱讀：166 作者：柒染 欄目：開發(fā)技術(shù)

vue怎么解決數(shù)據(jù)加載時插值表達式閃爍的問題，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

數(shù)據(jù)加載,插值表達式閃爍問題

1.在公共的css樣式中加入

[v-cloak] {
    display: none !important;
}

2.在el掛載的標簽上添加

<div class="#app" v-cloak>
    <p>{undefined{value.name}}</p>
</div>

解決插值表達式渲染數(shù)據(jù)閃動

在使用Vue的時候，經(jīng)常會用到插值表達式，也就是兩個大括號{{}}的語法，但是有時候會出現(xiàn)如下問題

先看代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">{{mes}}</div>
  <script>
    var app = new Vue({
      el:'#app',
      data(){
        return{
          mes:'helloworld'	
        }
      }
    })
    
    </script>
</body>
</html>

出現(xiàn)的問題

vue怎么解決數(shù)據(jù)加載時插值表達式閃爍的問題

瀏覽器瘋狂刷新，在某一瞬間的是內(nèi)容是這樣的，然后才會顯示為helloworld，會有一個閃動的問題，這其實是因為，如果單純的 <div id="app">{{mes}}</div>一句話，瀏覽器是解析不出來的，而Vue它自己的語法中是去將頁面的{{mes}}給解析出來，呈現(xiàn)出來在瀏覽器中，但在解析這期間是需要時間的，如果電腦運行速度慢，這就會越發(fā)的明顯，如某貴校的電費充值頁面

vue怎么解決數(shù)據(jù)加載時插值表達式閃爍的問題

為了解決這種不友好的問題，Vue官方其實給出了辦法的，使用v-cloak指令

vue怎么解決數(shù)據(jù)加載時插值表達式閃爍的問題

解決方法如下圖

vue怎么解決數(shù)據(jù)加載時插值表達式閃爍的問題

原理就是讓為編譯的給事先隱藏，上面的[v-cloak]指的是屬性選擇器。

看完上述內(nèi)容，你們掌握vue怎么解決數(shù)據(jù)加載時插值表達式閃爍的問題的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

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

vue
AI
助
手