有關 ref的 深入理解以及踩的坑

2021-09-27 07:03:53 字數 984 閱讀 1410

在頁面驗證的時候,多數會使用ref

來進行判

斷,有關

ref來進行判斷,有關

ref來進行

判斷,有

關ref的使用,因為vue的生命週期的原因,需要 在this.$nexttick() 之後才能夠正常的取到值。

在專案上使用的時候,ref繫結的是input,就使用value來判斷驗證是否該dom為空,其餘div 和span等元素,使用innerhtml來判斷。

例如

以上是普通dom的使用;

$ref還可以用在子元件上,talk is cheap,show code

正是因為可以取到子元件件中的data,導致我犯了乙個錯誤,而且是走進了死胡同,轉牛角尖。

我的驗證是乙個下拉框驗證,簡單寫 如下

// 這個子元件的data中有乙個 checkvalue 這樣乙個變數是顯示值的,所以我是取值

const value = this.$refs.spandropselect.checkvalue

我的問題就出現來,在頁面初始渲染的時候,

console.log (this.$refs.spandropselect) // 有checkvalue 也有值的是陣列

console.log(this.$refs.spandropselect.checkvalue) //拿不到值,顯示為空陣列

我想了很久才想明白,頁面初始渲染,頁面上有值,是因為上一次退出 我儲存在了v-for 的陣列裡面,子元件裡的checkvalue 還是data裡的 初始的狀態,沒有經過method方法進行賦值。

所以我對$ref 要判斷的是 子元件的這一種情況 的處理辦法是

}
結合一開始說的, 給這個span的樣式設為 透明,這樣判斷它的innerhtml即可。

Maxout的深入理解

轉之 maxout出現在icml2013上,作者goodfellow將maxout和dropout結合後,號稱在mnist,cifar 10,cifar 100,svhn這4個資料上都取得了start of art的識別率。從 中可以看出,maxout其實一種激發函式形式。通常情況下,如果激發函式採...

對this 的深入理解

this的取值,分四種情況。我們來挨個看一下。在此再強調一遍乙個非常重要的知識點 在函式中this到底取何值,是在函式真正被呼叫執行的時候確定的,函式定義的時候確定不了。因為this的取值是執行上下文環境的一部分,每次呼叫函式,都會產生乙個新的執行上下文環境。情況1 建構函式 所謂建構函式就是用來n...

TI xDAIS的深入理解

現代軟體開發,已從上世紀的面向過程程式設計發展到當前的面向框架程式設計。軟體開發經驗已證明 框架話 模組化的開發方式可以極大的提高軟體開發效率,提高 質量及 重用率。然而,在嵌入式程式設計中,由於長期缺乏完善的開發框架和可用的api,開發人員依舊利用c或組合語言和底層硬體打交道,凡是親力親為,這必然...