闃呰鏈枃馃摉浣犱細锛氭悶娓呮锛歷-model鐨勮娉曠硸鏄粈涔堬紵vue2瀵瑰師鐢熺粍浠跺仛浜嗗摢浜涚壒娈婂鐞嗭紵寮勬竻妤氾細v-model鏄崟鍚戞暟鎹祦杩樻槸鍙屽悜鏁版嵁缁戝畾锛熷紕娓呮锛氶櫎浜嗚娉曠硸涔嬪锛寁-model鐨勨€滃壇浣滅敤鈥濇槸浠€涔堬紵浜嗚В濡備綍璁╂偍鐨勭粍浠朵篃鏀寔v-model璇硶銆?銆乿-model鐨勬湰璐ㄦ槸璇硶绯栥€傘€妚-model鏈川涓婃棤闈炲氨鏄彞娉曠硸锛岃礋璐ｇ洃鍚敤鎴疯緭鍏ヤ簨浠舵洿鏂版暟鎹紝閽堝涓€浜涙瀬绔満鏅仛涓€浜涚壒娈婂鐞嗐€傘€?-瀹樻柟鏂囨。浠€涔堟槸鍙ユ硶绯栵紵鍙ユ硶绯栵紝绠€鍗曠殑璇?鏄€滄柟渚跨殑鍐欐硶鈥濄€傚湪澶у鏁版儏鍐典笅锛寁-model="foo"鐩稿綋浜庯細value="foo"鍔犱笂@input="foo=$event";鏄殑锛屽湪澶у鏁版儏鍐典笅銆備絾涔熸湁渚嬪锛歷ue2涓虹粍浠舵彁渚涗簡涓€涓猰odel灞炴€э紝鍏佽鐢ㄦ埛鑷畾涔変紶鍊肩殑prop鍚嶇О鍜屾洿鏂板€肩殑浜嬩欢鍚嶇О锛岃繖涓殏涓旂暐杩囷紝鍦ㄧ鍥涜妭璇﹁堪瀵逛簬鍘熺敓鐨刪tml鍘熺敓鍏冪礌锛孷ue鍋氫簡寰堝鈥滆剰娲烩€濓紝鐩殑鏄负浜嗚鎴戜滑蹇界暐html鍦╝pi涓殑宸紓銆俧o鐨勫乏鍙冲啓娉曚互涓嬪厓绱犵瓑浠凤細textarea鍏冪礌锛歴elect涓嬫媺妗嗭細inputtype='radio'鍗曢€夋锛歩nputtype='checkbox'澶氶€夋锛氬湪缂栫▼鎬濊矾涓婏紝杩欑甯姪鐢ㄦ埛銆庨殣钘忕殑鏂瑰紡缁嗚妭绉颁负灏佽銆?.v-model鍙槸璇硶绯栧悧锛燂紙鍐风煡璇嗭級v-model涓嶄粎浠呮槸璇硶绯栵紝瀹冭繕鏈夊壇浣滅敤銆傚壇浣滅敤濡備笅锛氬鏋渧-model缁戝畾浜嗗搷搴斿紡瀵硅薄涓婁笉瀛樺湪鐨勫睘鎬э紝閭ｄ箞vue浼氭倓鎮勫鍔犺繖涓睘鎬э紝璁╁畠鍝嶅簲寮忋€備緥濡傦紝鏌ョ湅浠ヤ笅浠ｇ爜锛?/鍦ㄦā鏉夸腑锛?el-inputv-model="user.tel">//鍦ㄨ剼鏈腑锛歟xportdefault{data(){return{user:{name:'鍏紬鍙?鍓嶇鎯抽挀楸?,}}}}鍝嶅簲寮忔暟鎹腑娌℃湁瀹氫箟user.tel灞炴€э紝浣嗘槸user.tel鍦ㄦā鏉夸腑缁戝畾浜唙-model銆傜寽鐚滃綋浣犺緭鍏ョ殑鏃跺€欎細鍙戠敓浠€涔堢湅鏁堟灉锛氭彮鏅撶瓟妗堬細浼氱粰鐢ㄦ埛娣诲姞tel灞炴€э紝鑰屼笖tel灞炴€ц繕鏄搷搴斿紡鐨勩€傝繖灏辨槸鈥滃壇浣滅敤鈥濈殑浣滅敤锛屼綘瀛︿細浜嗗悧锛?銆乿-model鏄弻鍚戠粦瀹氳繕鏄崟鍚戞暟鎹祦锛?.1v-model鏄弻鍚戠粦瀹氬悧锛熸槸鐨勶紝姝ｅ紡鏄繖鏍枫€傘€婂彲浠ヤ娇鐢╲-model鎸囦护鍦ㄨ〃鍗?input>銆?textarea>鍜?select>鍏冪礌涓婂垱寤哄弻鍚戞暟鎹粦瀹氥€傘€忊€斺€攙ue2瀹樻柟鏂囨。2.2v-model鏄崟鍚戞暟鎹祦鍚楋紵鏄殑锛岀敋鑷虫槸鍏稿瀷鐨勫崟鍚戞暟鎹祦鑼冨紡锛岃櫧鐒跺畼鏂规病鏈夎〃杈炬竻妤氾紝浣嗘槸鎴戜滑鍙互鐪嬩竴涓嬩袱鑰呯殑鍏崇郴锛屼粈涔堟槸鍗曟祦锛熺埗缁勪欢锛屾帹鑽愮殑鏂瑰紡鏄姏鍑轰竴涓簨浠讹紝閫氱煡鐖剁粍浠惰嚜宸辨敼鍙樼粦瀹氬€笺€倂-model鐨勫仛娉曟槸浠€涔堬紵v-model鐨勫仛娉曢潪甯搁€傚悎鍗曢」鏁版嵁娴併€傜敋鑷虫洿澶氾紝瀹冨湪鍛藉悕鍜屼簨浠跺畾涔変笂缁欏嚭浜嗕竴绉嶈鑼冦€備紬鎵€鍛ㄧ煡鐨?sync淇グ绗︽槸鍗曞悜鏁版嵁娴佺殑鍙︿竴绉嶅吀鍨嬭寖寮忋€傗€滃崟鍚戞暟鎹祦鈥濆彲浠ユ鎷负8涓瓧锛氣€滄暟鎹笅闄嶏紝浜嬩欢goup鈥濄€?.濡備綍璁╀綘寮€鍙戠殑缁勪欢鏀寔v-model铏界劧鎴戜笉鎯宠璧锋潵锛岃繖纭疄鏄竴閬撻珮棰戦潰璇曢銆傪煠ｅ湪瀹氫箟涓€涓獀ue缁勪欢鏃讹紝鍙互鎻愪緵涓€涓猰odel灞炴€ф潵瀹氫箟璇ョ粍浠跺浣曟敮鎸乿-model銆傛ā鍨嬪睘鎬ф湰韬湁涓€涓粯璁ゅ€硷紝濡備笅锛?/榛樿妯″瀷灞炴€xportdefault{model:{prop:'value',event:'input'}}鍗冲鏋滀笉瀹氫箟妯″瀷灞炴€э紝鎴栬€呬綘璺熷埆浜轰娇鐢ㄤ綘鐨勮嚜瀹氫箟缁勪欢鏃讹紝v-model="foo"姝ｅソ绛夊悓浜庯細value="foo"鍔犱笂@input="foo=$event"銆傚鏋滃model灞炴€у仛涓€浜涗慨鏀癸紝濡備笅锛?/榛樿鐨刴odel灞炴€xportdefault{model:{prop:'ame',event:'zard'}}閭ｄ箞锛寁-model="foo"灏辩浉褰撲簬锛歛me=鈥渇oo鈥濆姞涓夽zard=鈥渇oo=$event鈥濄€傛病閿欙紝灏辫繖涔堢畝鍗曪紝鎴戜滑鏉ョ湅涓€涓緥瀛愩€傞鍏堝畾涔変竴涓嚜瀹氫箟缁勪欢锛?template>
WeareTI{{ame}}championsplusminus
鐒跺悗鎴戜滑鍦ㄧ埗缁勪欢涓娇鐢ㄨ繖涓粍浠讹細//
//exportdefault{data(){return{ti:8}}}鐪嬬湅鏁堟灉鍚э細璁╀綘鐨勭粍浠舵敮鎸乿-model灏辫繖涔堢畝鍗曘€?.鑾峰彇demo婧愮爜鍜屾簮鐮佽璁块棶githubzhangshichun鐨刧ithub6.鏈€鍚庯紝鎴戞槸鏄ュ摜銆傛垜鍠滄vue.js銆丒lementUI鍜孍lementPlus鐩稿叧鐨勬妧鏈爤銆傛垜鐨勭洰鏍囨槸鎶婃渶瀹炵敤鏈夌敤鐨勭煡璇嗙偣鍒嗕韩缁欏ぇ瀹躲€傚笇鏈涘ぇ瀹舵棭鐐逛笅鐝紝蹇偣瀹屾垚宸ヤ綔锛屼粠瀹归挀楸拣煇熴€傚彲浠ュ湪鍏紬鍙锋壘鍒版垜锛氬墠绔兂閽撻奔銆傚笇鏈涘ぇ瀹剁帺寰楀紑蹇冦€?/p>
