国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue v-for渲染頁面,獲取不到DOM元素解析

CastlePeaK / 2222人閱讀

摘要:近期在開發(fā)中發(fā)現(xiàn)了在某些特定情況下,出現(xiàn)了獲取不到渲染出來的元素的情況,原因身為小白的我暫時還沒搞清楚忘大佬指出,但是卻得出來初步的解決方案。最終發(fā)現(xiàn)將數(shù)據(jù)初始化放到里面即可在里面正確輸出獲取到元素的長度。

v-for 渲染循環(huán)渲染頁面的出現(xiàn)讓我們告別了繁瑣的JS拼接,在開發(fā)上面節(jié)省了很多時間。
近期在開發(fā)中發(fā)現(xiàn)了在某些特定情況下,出現(xiàn)了獲取不到渲染出來的DOM元素的情況,原因身為小白的我暫時還沒搞清楚(忘大佬指出),但是卻得出來初步的解決方案。

HTML 代碼

  • {{item.age}}
  • JS 代碼(錯誤代碼)

    // 錯誤代碼示例一
    var vm = new Vue({
        el: "#app",
        data: {
            abc: new Object()
        },
        mounted: function () {
            this.getList();
            var li = document.querySelectorAll("li");
            console.log(li.length);     // 輸出0
        },
        methods: {
            getList: function () {
                 var data = [
                     { name: "1", age: "21" },
                     { name: "2", age: "22" },
                     { name: "3", age: "23" },
                     { name: "4", age: "24" },
                     { name: "5", age: "25" }
                 ];
                 this.$set(this, "abc", data);
             }
        }
    }) 
    // 錯誤代碼示例二
    var vm;
    window.onload = function(){
        vm = { ... } // 實(shí)例化代碼如上,去除 mounted 生命周期
        vm.getList();
        var li = document.querySelectorAll("li");
        console.log(li.length);     // 輸出0
    }

    上述代碼中的 li 即是通過 v-for 渲染生成,但是兩種方式獲取 li 輸出的長度都為0。

    最終發(fā)現(xiàn)將數(shù)據(jù)初始化放到 beforeMount 里面即可在 mounted 里面正確輸出獲取到 li 元素的長度。

    JS 代碼(解決方案)

    // 解決方案一(數(shù)據(jù)初始化放在掛載之前)
    var vm = new Vue({
        el: "#app",
        data: {
            abc: new Object()
        },
        beforeMount: function(){
             this.getList();
        },
        mounted: function () {
             var li = document.querySelectorAll("li");
             console.log(li.length)     // 輸出5
        },
        methods: {
            getList: function () {
                 var data = [
                     { name: "1", age: "21" },
                     { name: "2", age: "22" },
                     { name: "3", age: "23" },
                     { name: "4", age: "24" },
                     { name: "5", age: "25" }
                 ];
                 this.$set(this, "abc", data);
           }
        }
    }) 
    
    // 解決方案二(mounted周期里面使用VUE自帶鉤子函數(shù)$nextTick做處理)
    mounted: function () {
        this.getList();
        this.$nextTick(function () {
              var li = document.querySelectorAll("li");
              console.log(li.length)  // 輸出 5
        })
    }

    文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/95601.html

    相關(guān)文章

    • 后端開發(fā)者的Vue學(xué)習(xí)之路(一)

      摘要:如果我們作為一個后端開發(fā)者想掌握一個前端框架,是一個好選擇,因?yàn)樗銐虻囊讓W(xué)。是語言的下一代標(biāo)準(zhǔn)。數(shù)據(jù)方法生命周期鉤子函數(shù)其他有些內(nèi)容比較重要,留到后面講定義數(shù)據(jù)定義數(shù)據(jù)定義了數(shù)據(jù),那么就可以在管理的區(qū)域中使用的獲取數(shù)據(jù)的語法來獲取數(shù)據(jù)。目錄 前言: iview組件庫示例 element組件庫示例 ...

      番茄西紅柿 評論0 收藏0
    • 前端面試--vue

      摘要:注意重點(diǎn)是獲取更新后的就是在開發(fā)過程中有個需求是需要在階段操作數(shù)據(jù)更新后的節(jié)點(diǎn)這時候就需要用到就是用來知道什么時候更新完成原因在鉤子函數(shù)執(zhí)行的時候其實(shí)并未進(jìn)行任何渲染,而此時進(jìn)行操作無異于徒勞,所以在中一定要將操作的代碼放進(jìn)的回調(diào)函數(shù)中。 1. 最簡單的vue el: dom節(jié)點(diǎn) data: 數(shù)據(jù) Vue 測試實(shí)例 - 菜鳥教程(runoob.com) ...

      coordinate35 評論0 收藏0
    • vue面試

      摘要:雖然計(jì)算屬性在大多數(shù)情況下更合適,但有時也需要一個自定義的偵聽器,當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,通過偵聽器最有用。路由的鉤子函數(shù)首頁可以控制導(dǎo)航跳轉(zhuǎn),,等,一般用于頁面的修改。 談?wù)勀銓VVM開發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型,數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義;View 代表UI視圖,負(fù)責(zé)數(shù)據(jù)的展示;...

      vspiders 評論0 收藏0
    • Vue面試中,經(jīng)常會被問到的面試題/Vue知識點(diǎn)整理

      摘要:可以在該鉤子中進(jìn)一步地更改狀態(tài),不會觸發(fā)附加的重渲染過程。我工作中只用到,對和不怎么熟與的區(qū)別相同點(diǎn)都支持指令內(nèi)置指令和自定義指令都支持過濾器內(nèi)置過濾器和自定義過濾器都支持雙向數(shù)據(jù)綁定都不支持低端瀏覽器。 看看面試題,只是為了查漏補(bǔ)缺,看看自己那些方面還不懂。切記不要以為背了面試題,就萬事大吉了,最好是理解背后的原理,這樣面試的時候才能侃侃而談。不然,稍微有水平的面試官一看就能看出,是...

      mengbo 評論0 收藏0
    • VUE知識點(diǎn)集錦

      摘要:載入前后在階段,實(shí)例的和都初始化了,但還是掛載之前為虛擬的節(jié)點(diǎn),還未替換。類似于,不同在于提交的是,而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別:https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理: 答:VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...

      Tecode 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <