摘要:近期在開發(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
摘要:如果我們作為一個后端開發(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組件庫示例 ...
摘要:注意重點(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) ...
摘要:雖然計(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ù)的展示;...
摘要:可以在該鉤子中進(jìn)一步地更改狀態(tài),不會觸發(fā)附加的重渲染過程。我工作中只用到,對和不怎么熟與的區(qū)別相同點(diǎn)都支持指令內(nèi)置指令和自定義指令都支持過濾器內(nèi)置過濾器和自定義過濾器都支持雙向數(shù)據(jù)綁定都不支持低端瀏覽器。 看看面試題,只是為了查漏補(bǔ)缺,看看自己那些方面還不懂。切記不要以為背了面試題,就萬事大吉了,最好是理解背后的原理,這樣面試的時候才能侃侃而談。不然,稍微有水平的面試官一看就能看出,是...
摘要:載入前后在階段,實(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() 這個...
閱讀 1492·2021-11-24 11:16
閱讀 2697·2021-07-28 12:32
閱讀 2308·2019-08-30 11:22
閱讀 1445·2019-08-30 11:01
閱讀 604·2019-08-29 16:24
閱讀 3552·2019-08-29 12:52
閱讀 1632·2019-08-29 12:15
閱讀 1338·2019-08-29 11:18