Vue資料繫結隱藏的神坑

2022-02-13 06:16:50 字數 767 閱讀 9151

今天被vue的乙個坑給折磨了一天,終於發現是什麼問題,我們先來模擬乙個場景:

**如下:

我們進頁面就點按鈕,你猜會輸出什麼?

是undefined,不算奇怪,你什麼都沒輸入,當然是undefined了。

ok,接下來重新整理頁面,進去多一步操作,先點選一下input輸入框,在點選按鈕,只是多做這一步操作:

輸出的是空白,在chrome中空白就代表空字串,可以修改一下列印結果:console.log(this.sendjson.name === "")

其實這看起來不是個大問題,但是在我的場景裡問題就大了。

我要把輸入框內的值作為乙個物件的屬性,問題就來了,看圖:

這個坑牛逼不,我真是個奇葩。

vue資料繫結

單向資料繫結 data流入頁面,data一變,頁面也變 雙向資料繫結 data與頁面雙向繫結,互相影響,v model value v model 只有輸入dom才有value,v model會預設收集輸入類dom的value,所以可以去掉 value v model類似react中的受控元件 re...

vue 單相繫結 Vue的雙向繫結和單向資料流

五一假期在家補了課,看到雙向繫結與單向資料流的概念。瓦特,我之前以為vue的v model就是雙向資料流,其實不然,下面讓我仔細來看看 雙向繫結 簡而言之,雙向繫結就是model的更新會觸發view的更新,view的更新會觸發model的更新,它們的作用是相互的 上傳失敗.image 81a06f ...

vue的雙向資料繫結

原理 vue實現雙向資料繫結的原理就是利用了 object.defineproperty 這個方法重新定義了物件獲取屬性值 get 和設定屬性值 set 的操作來實現的。它接收三個引數,要操作的物件,要定義或修改的物件屬性名,屬性描述符。重點就是最後的屬性描述符。屬性描述符是乙個物件,主要有兩種形式...