05. 雙向處理表單資料 (v-model)

更動表單資料，資料影響畫面呈現：

摘要

1. 上半部內容顯示：在 HTML 用 {{ }} 放上 data 裡面的資料，將 data 顯示到畫面上。
2. 下半部表單取值：在 input 用 v-model 來取得表單資料，並更新到 data 中，這樣上半部的文字內容也會跟著改變。

顯示 data 到畫面上

要從表單放到 vue 中使用的預設資料：

let data = {
  name: "Alex",
  sex: "男",
  age: "30~40 歲間",
  favor: ["打扣", "電玩", "遊日本"],
  member: true
}

對應輸出的 HTML：

<div class="input">
    {{ name }}，
    {{ sex }}性，
    年齡為 {{ age }}，
    <br>
    {{ favor.length? "喜歡":""}} {{ favor.join("、") }}，
    {{ member? "已":"未" }}成為頻道會員。
</div>

取得表單資料，更新到 data (v-model)

input: text (文字)

<td class="title">姓名：</td>
<td>
  <input type="text" v-model="name">
</td>

input: radio (單選)

單選時，每個選項的 input 都用 v-model 綁同樣的資料名稱。

<td class="title">性別：</td>
<td>
  <input type="radio" value="女" v-model="sex">女
  <input type="radio" value="男" v-model="sex">男
</td>

input: select > option (選單)

如果是 select > option 的選單，v-model 放在 select 標籤裡。

<td class="title">年齡：</td>
<td>
  <select v-model="age">         // v-model 位置
    <option>20歲以下</option>
    <option>20~30 歲間</option>
    <option>30~40 歲間</option>
    <option>40 歲以上</option>
  </select>
</td>

input: checkbox (多個)

多選時，每個選項的 input 也一樣用 v-model 綁相同的資料名稱。

<td class="title">興趣：</td>
<td>
  <input type="checkbox" value="打扣" v-model="favor">打扣
  <input type="checkbox" value="電玩" v-model="favor">電玩
  <input type="checkbox" value="遊日本" v-model="favor">遊日本
</td>

因為資料可能會有多個值時，變數 favor 要用陣列的形式才可以儲存資料。

favor: ["打扣", "電玩", "遊日本"]

透過 HTML 顯示陣列資料時，使用 join("、") 將陣列中的資料隔開來。 另外，若沒有資料被勾選 (沒有陣列長度)，就不顯示 「喜歡」 等字。

{{ favor.length? "喜歡":""}} {{ favor.join("、") }}

input: checkbox (一個)

如果只有一個 checkbox：

<td class="title">會員：</td>
<td>
  <input type="checkbox" v-model="member">加入
</td>

也可以用 ture/false 來判斷 checkbox 是否被勾選。

member: true

然後在 HTML 設定這兩種狀態下分別要呈現的資料。

{{ member? "已":"未" }}成為頻道會員。