快捷導(dǎo)航

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

更新時間：2022年01月24日 11:20:27 作者：javachen__

這篇文章主要介紹了vue如何解決數(shù)據(jù)加載時,插值表達式閃爍問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

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

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

2.在el掛載的標(biāo)簽上添加

<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)的問題

在這里插入圖片描述

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

在這里插入圖片描述