欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解vue數(shù)據(jù)渲染出現(xiàn)閃爍問題

 更新時間：2017年06月29日 08:55:25   作者：Shron_mx  
本篇文章主要介紹了vue數(shù)據(jù)渲染出現(xiàn)閃爍問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

今天在使用vue進行數(shù)據(jù)渲染的時候發(fā)現(xiàn)當(dāng)我不停的按F5刷新的時候出現(xiàn)了{{message}}的情況。經(jīng)過多方查找我知道了要解決這個問題需要添加v-cloak指令，這時有一個問題困擾了我很久，我明明按照大家所說的加了v-for為什么還是沒有用。后來折騰了很久才發(fā)現(xiàn)原因，先不說為什么，看看代碼來：

在html中：

<ul v-for="item in person">
  <li v-cloak>{{item.name}}</li>
</ul>

在CSS中:

[v-cloak]:{diapsly:none;}

在script中：

var vm = new Vue({
  el:'#myapp',
  date:{
    person:[
      {name:'zhangsan'},
      {name:'lisi'},
      {name:'wangwu'}
    ]
  }
})

最開始是沒有css樣式，當(dāng)我發(fā)現(xiàn)我不斷的刷新的時候頁面上會出現(xiàn){{item.name}}一閃而逝,這時我在li上面添加了v-cloak指令，并添加了css樣式。此時，我發(fā)現(xiàn)還是會有閃爍，我發(fā)現(xiàn)他根本沒有執(zhí)行css的樣式。
現(xiàn)在大家應(yīng)該都猜到原因了吧，因為我是在for循環(huán)里面添加的v-cloak。之前查的資料是直接使用。

css:

[v-cloak]:{display:none}

html:

<div v-cloak>{{message}}</div>

看到別人的寫法以后我就以為是直接在要渲染的該標(biāo)簽添加指令，這也導(dǎo)致了我的v-cloak一直沒有起到作用。最后，我把v-cloak添加到了v-for上，一切終于變得正常了。

<ul v-for="item in person" v-cloak>
  <li >{{item.name}}</li>
</ul>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue 根據(jù)選擇條件顯示指定參數(shù)的例子

    vue 根據(jù)選擇條件顯示指定參數(shù)的例子

    今天小編就為大家分享一篇vue 根據(jù)選擇條件顯示指定參數(shù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 深入理解Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)

    深入理解Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)

    本文通過實例代碼給大家介紹了Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-08-08
  • Vue中使用方法、計算屬性或觀察者的方法實例詳解

    Vue中使用方法、計算屬性或觀察者的方法實例詳解

    這篇文章主要介紹了Vue中如何使用方法、計算屬性或觀察者的相關(guān)知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2018-10-10
  • vue中虛擬DOM與Diff算法知識精講

    vue中虛擬DOM與Diff算法知識精講

    這篇文章主要為大家介紹了vue中虛擬DOM與Diff算法知識的圖文精講，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-04-04
  • vue-cli+iview項目打包上線之后圖標(biāo)不顯示問題及解決方法

    vue-cli+iview項目打包上線之后圖標(biāo)不顯示問題及解決方法

    這篇文章主要介紹了解決vue-cli+iview項目打包上線之后圖標(biāo)不顯示問題,本文通過兩種方法給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-10-10
  • Vue路由守衛(wèi)案例代碼

    Vue路由守衛(wèi)案例代碼

    在Vue中，路由守衛(wèi)分為三種：全局路由守衛(wèi)、獨享路由守衛(wèi)以及組件內(nèi)路由守衛(wèi)，本文重點介紹Vue路由守衛(wèi)案例代碼,需要的朋友可以參考下
    2023-02-02
  • el-table?fixed固定列導(dǎo)致錯位的解決方法介紹

    el-table?fixed固定列導(dǎo)致錯位的解決方法介紹

    ElementUI中el-table設(shè)置指定列固定不動,不受滾動條影響,下面這篇文章主要給大家介紹了關(guān)于el-table?fixed固定列導(dǎo)致錯位的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-11-11
  • vue實現(xiàn)滾動加載的表格

    vue實現(xiàn)滾動加載的表格

    在系統(tǒng)開發(fā)中遇到了這么一個問題：后端一次性返回上百條的數(shù)據(jù)，我需要把返回的數(shù)據(jù)全部顯示在表格里，而且甲方爸爸明確指定了表格是不允許使用分頁的?？墒钱?dāng)使用a-table裝載上百條數(shù)據(jù)時，頁面出現(xiàn)了明顯的卡頓現(xiàn)象。只能使用滾動加載的方案來代替了。
    2021-06-06
  • Vue之監(jiān)聽方法案例詳解

    Vue之監(jiān)聽方法案例詳解

    這篇文章主要介紹了Vue之監(jiān)聽方法案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
    2021-07-07
  • Vue2使用TailwindCSS方法及遇到問題小結(jié)

    Vue2使用TailwindCSS方法及遇到問題小結(jié)

    Tailwind CSS是一個全新的、可定制的CSS框架,它提供了一系列的CSS類,用于構(gòu)建現(xiàn)代化的Web界面,這篇文章主要介紹了Vue2使用TailwindCSS方法及遇到問題小結(jié),需要的朋友可以參考下
    2024-03-03

最新評論