快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

在使用Vue的時(shí)候，經(jīng)常會(huì)用到插值表達(dá)式，也就是兩個(gè)大括號(hào){{}}的語法，但是有時(shí)候會(huì)出現(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)容是這樣的，然后才會(huì)顯示為helloworld，會(huì)有一個(gè)閃動(dòng)的問題，這其實(shí)是因?yàn)椋绻麊渭兊?<div id="app">{{mes}}</div>一句話，瀏覽器是解析不出來的，而Vue它自己的語法中是去將頁面的{{mes}}給解析出來，呈現(xiàn)出來在瀏覽器中，但在解析這期間是需要時(shí)間的，如果電腦運(yùn)行速度慢，這就會(huì)越發(fā)的明顯，如某貴校的電費(fèi)充值頁面

在這里插入圖片描述