在表單文本框?qū)懭胛谋緯r(shí)，將文本同步顯示

數(shù)據(jù)監(jiān)聽.gif

實(shí)現(xiàn)此效果有多種方式。

事件監(jiān)聽方式

具體代碼

keyup事件監(jiān)聽

watch監(jiān)聽

具體代碼

watch會(huì)自動(dòng)監(jiān)聽data中定義的數(shù)據(jù)

watch監(jiān)聽

computed計(jì)算屬性

具體代碼

當(dāng)computed中用到的數(shù)據(jù)，有任何一個(gè)變動(dòng)時(shí)，就會(huì)觸發(fā)重新計(jì)算

computed計(jì)算屬性

computed vs methods vs watch

• computed 結(jié)果會(huì)被緩存，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算。主要當(dāng)作屬性來使用

• methods 表示一個(gè)具體的操作，主要用于寫業(yè)務(wù)邏輯

• watch 主要用來監(jiān)聽某些特定數(shù)據(jù)的變化，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作；可以看作是computed和methods的結(jié)合體

更多vue.js的有趣實(shí)例，請(qǐng)點(diǎn)擊移步至目錄