---

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"/>

1. 沒有配置input的value屬性，那麼收集的就是checked（勾選 or 未勾選，是布林值）

2. 配置input的value屬性: 1) v-model的初始值是非陣列，那麼收集的就是checked（勾選 or 未勾選，是布林值） 2) v-model的初始值是陣列，那麼收集的的就是value組成的陣列！！！

---

備註：v-model的三個修飾符：

• lazy：失去焦點再收集資料
• number：輸入字串轉為有效的數字
• trim：輸入首尾空格過濾

示例

```html

```

最後，歡迎關注我的專欄，和YK菌做好朋友