Vue表單控件綁定圖文詳解
Vue 表單控件綁定的實(shí)現(xiàn)，具體可以通過(guò)以下步驟操作來(lái)實(shí)現(xiàn)。
1、基礎(chǔ)用法
可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。根據(jù)控件類型它自動(dòng)選取正確的方法更新元素。盡管有點(diǎn)神奇，v-model 不過(guò)是語(yǔ)法糖，在用戶輸入事件中更新數(shù)據(jù)，以及特別處理一些極端例子。
2、Checkbox
單個(gè)勾選框，邏輯值：
3、多個(gè)勾選框，綁定到同一個(gè)數(shù)組：
4、動(dòng)態(tài)選項(xiàng)，用 v-for 渲染：
5、值綁定
對(duì)于單選按鈕，勾選框及選擇框選項(xiàng)，v-model 綁定的值通常是靜態(tài)字符串（對(duì)于勾選框是邏輯值）：
6、但是有時(shí)想綁定值到 Vue 實(shí)例一個(gè)動(dòng)態(tài)屬性上?？梢杂?v-bind 做到。 而且 v-bind允許綁定輸入框的值到非字符串值。
7、參數(shù)特性lazy
在默認(rèn)情況下，v-model 在input 事件中同步輸入框值與數(shù)據(jù)，可以添加一個(gè)特性lazy，從而改到在 change 事件中同步：
8、debounce
debounce 設(shè)置一個(gè)最小的延時(shí)，在每次敲擊之后延時(shí)同步輸入框的值與數(shù)據(jù)。如果每次更新都要進(jìn)行高耗操作（例如在輸入提示中 Ajax 請(qǐng)求），它較為有用。
9、注意 debounce 參數(shù)不會(huì)延遲 input 事件：它延遲“寫(xiě)入”底層數(shù)據(jù)。因此在使用 debounce時(shí)應(yīng)當(dāng)用 vm.$watch() 響應(yīng)數(shù)據(jù)的變化。若想延遲 DOM 事件，應(yīng)當(dāng)使用 debounce 過(guò)濾器。注意 debounce 參數(shù)不會(huì)延遲 input 事件：它延遲“寫(xiě)入”底層數(shù)據(jù)。因此在使用 debounce時(shí)應(yīng)當(dāng)用 vm.$watch() 響應(yīng)數(shù)據(jù)的變化。若想延遲 DOM 事件，應(yīng)當(dāng)使用 debounce 過(guò)濾器。
相關(guān)文章
基于Vue實(shí)現(xiàn)頁(yè)面切換左右滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)頁(yè)面切換左右滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Vue+ECharts+高德地圖API實(shí)現(xiàn)天氣預(yù)報(bào)數(shù)據(jù)可視化的教程
所謂數(shù)據(jù)可視化，我們可以理解為從宏觀角度來(lái)看一眼就能看出來(lái)整個(gè)數(shù)據(jù)的占比，走向，對(duì)于數(shù)據(jù)可視化，很多互聯(lián)網(wǎng)公司是很看重這一塊的，包括大廠，本就將給大家介紹如何通過(guò)Vue+ECharts+高德地圖API實(shí)現(xiàn)天氣預(yù)報(bào)數(shù)據(jù)可視化2023-06-06
Vue寫(xiě)一個(gè)簡(jiǎn)單的倒計(jì)時(shí)按鈕功能
這篇文章主要介紹了基于Vue寫(xiě)一個(gè)簡(jiǎn)單的倒計(jì)時(shí)按鈕功能，在項(xiàng)目開(kāi)發(fā)的過(guò)程，經(jīng)常會(huì)遇到發(fā)送驗(yàn)證碼，點(diǎn)擊之后有60秒倒計(jì)時(shí)的按鈕，今天小編就給大家分享實(shí)例代碼，需要的朋友參考下吧2018-04-04
這篇文章主要介紹了Vue filter介紹及詳細(xì)使用,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
詳解在vue-cli項(xiàng)目中使用mockjs(請(qǐng)求數(shù)據(jù)刪除數(shù)據(jù))
本篇文章主要介紹了在vue-cli項(xiàng)目中使用mockjs(請(qǐng)求數(shù)據(jù)刪除數(shù)據(jù))，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了vue項(xiàng)目首屏打開(kāi)速度慢的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題
這篇文章主要介紹了詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了如何修改Vue打包后文件的接口地址配置的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue中使用過(guò)濾器filters的this為undefined的問(wèn)題
這篇文章主要介紹了vue中使用過(guò)濾器filters的this為undefined的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
關(guān)于Elementui中toggleRowSelection()方法實(shí)現(xiàn)分頁(yè)切換時(shí)記錄之前選中的狀態(tài)
這篇文章主要介紹了關(guān)于Elementui中toggleRowSelection()方法實(shí)現(xiàn)分頁(yè)切換時(shí)記錄之前選中的狀態(tài),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03