【Vue】基礎系列(七)v-model - 自動收集資料 - 表單資料自動更新
theme: vue-pro highlight: a11y-dark
嗨!~ 大家好,我是YK菌 🐷 ,一個微系前端 ✨,愛思考,愛總結,愛記錄,愛分享 🏹,歡迎關注我呀 😘 ~ [微訊號:
yk2012yk2012
,微信公眾號:ykyk2012
]
「這是我參與11月更文挑戰的第21天,活動詳情檢視:2021最後一次更文挑戰」
今天我們主要來學習Vue中的v-model的基本使用~
使用v-model(雙向資料繫結)自動收集資料
- text/textarea
- checkbox
- radio
- select
text
<input type="text"/>
, 則v-model收集的是value值,使用者輸入的就是value值。
```html
```
radio
<input type="radio"/>
,則v-model收集的是value值,且要給標籤配置value值。
```html
```
checkbox
<input type="checkbox"/>
-
沒有配置input的value屬性,那麼收集的就是checked(勾選 or 未勾選,是布林值)
-
配置input的value屬性: 1) v-model的初始值是非陣列,那麼收集的就是checked(勾選 or 未勾選,是布林值) 2) v-model的初始值是陣列,那麼收集的的就是value組成的陣列!!!
備註:v-model的三個修飾符:
lazy
:失去焦點再收集資料number
:輸入字串轉為有效的數字trim
:輸入首尾空格過濾
示例
```html
```
最後,歡迎關注我的專欄,和YK菌做好朋友
「其他文章」
- 從校園到職場 | YK菌的2022年中總結
- 【青訓營】月影老師告訴我寫好JavaScript的三大原則——元件封裝
- 【青訓營】月影老師告訴我寫好JavaScript原則與技巧大總結
- 2022屆秋招,從被拒到上岸 | 談談YK菌在2021年的經歷與收穫
- 【TS】快速上手(四)配置選項 - 編譯選項compilerOptions
- 【LeetCode】圖解反轉連結串列 - 迭代 - 遞迴
- 【LeetCode】最大子序和從O(N^3)到O(N) - 暴力初探 - 分而治之 - 線上處理
- 【JS】JavaScript基礎知識自我檢查大過關(第三關)函式定義與呼叫
- 【Vue】高階系列(六)Vue-cli配置代理 -demo3-GitHub使用者查詢-axios
- 【Vue】高階系列(五)元件間通訊
- 【Vue】高階系列(四)Vue模組化實戰-demo2-任務清單todoList
- 【TS】快速上手(二)型別宣告
- 【Vue】高階系列(三)Vue模組化實戰-demo1-動態評價頁面
- 【Vue】高階系列(二)Vue相關小知識
- 【Vue】高階系列(一)Vue元件定義與使用 - 非單檔案元件 - 單檔案元件 - VueComponent
- 【Vue】基礎系列(十一)Vue指令-常用內建指令-自定義指令-全域性指令-區域性指令
- 【Vue】基礎系列(九)動畫與過渡-trasition-enter-leave
- 【Vue】基礎系列(八)生命週期 - 初始化顯示 - 更新狀態 - 死亡狀態 - 父子元件
- 【Vue】基礎系列(七)v-model - 自動收集資料 - 表單資料自動更新
- 【Vue】基礎系列(六)事件處理 - 繫結監聽 - 事件修飾符 - 按鍵修飾符