vue如何解決數據加載時,插值表達式閃爍問題

Posted on by

數據加載,插值表達式閃爍問題

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

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

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

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

解決插值表達式渲染數據閃動

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

先看代碼

<!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>

出現的問題

在這裡插入圖片描述

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

在這裡插入圖片描述

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

在這裡插入圖片描述

解決方法如下圖

在這裡插入圖片描述

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

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：