原生js實現一個數據雙向繫結你還不會?

寫在前面

很多朋友在寫vue的時候,去面試,一般情況下面試官都會問你一個這樣的問題,簡單的說一下vue的雙向繫結的原理,知道使用原生js怎麼實現麼?很多人有的就是直接說使用物件的一個方法,有的直接說不知道怎麼實現的,等等,其實這個問題不是說很難,也是屬於一個比較基礎的問題,今天我們就簡單的實現掉它!喜歡的可以關注一波!我不寫關於技術的,很多人都覺得我的認證是假的了!

簡單的分析一波

所謂的雙向繫結就是這邊輸入資料的時候,另一個dom節點可以時刻監聽到這個資料的變化,並且做出相應的操作,最簡單的操作就是輸入什麼就顯示什麼,這個是怎麼實現的呢?我們使用構造器Object的一個方法屬性就行,它具有改變一個物件原有值的一個特性,所以這裡是可以直接進行改變的,那麼我們改變以後,監聽的是使用者的輸入操作,也就是onkeyup的操作,這個時候將onkeyup操作下的值給到上面需要顯示的值即可!原始碼如下:

<!DOCTYPE html> Document
{{textModel}}

效果

原生js實現一個數據雙向繫結你還不會?