# Day03 Vue 表單雙向綁定

###### tags: `Vue`

這邊要用vue做一個可以雙向綁定,使用者可編輯改變內容表單.


html //

 <div class="puntInformation px-4 py-3 ">
  Linda， 女 ， 20~25歲 ， 想要學英文寫作、英語口說、雅思 ， 已成為平台會員 。
 </div>

 js//
 
 let data = {

            name:'Linda',
            sex:'女',
            age:'20~25歲',
            order:['英文寫作','英語口說','雅思'],
            member:true

        }


        let app = new Vue({
            el: '#app',
            data: data,
        
        })

### 資料綁定畫面
名字、性別、年齡是單選，且無須判斷式所以依序寫上<kbd> {{ name }}</kbd>、<kbd> {{ sex }}</kbd>、<kbd>{{ age }}</kbd>。

#### 陣列資料綁定
想要學課程因為是陣列,無法直接輸出,如果用<kbd>{{ order }}</kbd>,會得到以下結果


須使用<kbd>join('、')</kbd>把字串組起來並分開每個陣列,才會跑出我們要的畫面.(如一開始本文大圖片)

#### 判斷式資料綁定

**已**加入會員、**未**加入會員用true、false來判斷,在html綁定資料利用
[javascript條件運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)

> 條件 (三元) 運算子 是 JavaScript 唯一用到三個運算元的運算子：在一個條件後面會跟著一個問號 (?)，如果條件是 truthy，在冒號(:)前的表達式會被執行，如果條件是 falsy，在冒號後面的表達式會被執行，這個運算子常常被用來當作 if 的簡潔寫法.

function getFee(isMember) {
  return (isMember ? '$2.00' : '$10.00');
}

console.log(getFee(true));
// expected output: "$2.00"

console.log(getFee(false));
// expected output: "$10.00"

console.log(getFee(null));
// expected output: "$10.00"

result//
> "$2.00"
> "$10.00"
> "$10.00"

在本文就是 <kbd> {{member ? '已':'未'}}</kbd>

最後html資料綁定會變成是:

<div class="puntInformation px-4 py-3 ">
            {{ name }}，
            {{ sex }} ， {{ age }} ， 
            想要學{{ order.join('、') }} ，
            {{member ? '已':'未'}}成為平台會員 。
</div>

### 綁定form表單 讓用戶可以自行修改資料

雙向綁定使用<kbd>v-model=""</kbd>

#### 名字雙向綁定

<kbd>v-model="name"</kbd>

 <input type="name" class="form-control ml-n5" id="inputName" placeholder="Name"
                        v-model="name">

#### inputType Radio 性別 二選一單選 雙向綁定

<kbd>v-model="sex"></kbd>，**注意**:inpuType裡面的<kbd>vauel=''</kbd>,影響畫面輸入文字,不是<kbd><label></label></kbd>裡面文字。

<input class="form-check-input" type="radio" name="examplesex" id="examplemale1" 
value="男生"checked v-model="sex">
 <label class="form-check-label" for="examplemale1">男生</label>

<input class="form-check-input ml-2" type="radio" name="examplesex" id="examplefemale1"
value="女生" v-model="sex">
<label class="form-check-label ml-4" for="examplefemale1">女生</label>

#### select年齡雙向綁定
<kbd>v-model="age"</kbd> ,和 **inputType Radio 性別 二選一單選 雙向綁定** 一樣,<kbd>vauel=''</kbd>,影響畫面輸入文字

<select class="custom-select ml-n4" id="inlineFormCustomSelect" v-model="age">

 <option value="20歲以下">20歲以下</option>
 <option value="20~25歲">20~25歲</option>
 <option value="26~30歲">26~30歲</option>
 <option value="30歲以上">30歲以上</option>
 </select>

#### 已/未成為會員雙向綁定
因為只有true/fasle，相對單純 ， 只要使用<kbd>v-model="member"</kbd>即可。

 <input class="form-check-input" type="checkbox" 
 id="inlineCheckbox4" v-model="member"
 <label class="form-check-label" for="inlineCheckbox4">加入</label>

#### checkbox多選雙向綁定

使用<kbd>v-model="order"</kbd>,一樣必須注意<kbd>vauel=''</kbd>

<div class="form-check form-check-inline ml-n4">
 <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="英文寫作" v-model="order">
<label class="form-check-label" for="inlineCheckbox1">英文寫作</label>
</div>

<div class="form-check form-check-inline  ">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="英文口說" v-model="order">
<label class="form-check-label" for="inlineCheckbox2">英文口說</label>
</div>

<div class="form-check form-check-inline  ">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="雅思" v-model="order">
<label class="form-check-label" for="inlineCheckbox3">雅思</label>
</div>

但是如果把所有checkbox勾選取消會出現以下畫面,單獨出現**想要學**文字,後面沒有任何文字,在視覺上看起來怪怪的,所以要來處裡多出來這三個字。


回到html模板去處理資料綁定畫面,使用判斷式資料綁定

function getFee(isMember) {
  return (isMember ? '$2.00' : '$10.00');
}

原理:有字串長度就顯示畫面,反之空字串(=無文字)

`{{order.length?'想要學':''}}`

**小細節:** 年齡後面 <kbd>，</kbd> 也要一併處理 ， ,不然會出現以下畫面


逗號處理過結果如下 :


### 在雙向綁定後,刪除data裡預設資料

在雙向綁定後,刪除data裡預設資料依然是可運行的,範例如:[在雙向綁定後,刪除data裡預設資料](https://jsfiddle.net/Harrmonia/pe79m3ak/10/) ,但畫面一開始會沒有資料

舉例.data資料是

 let data = {

            name:'Linda',
            sex:'女',
            age:'20~25歲',
            order:['英文寫作','英文口說','雅思'],
            member:true

        }

畫面如下


### [完整data code](https://jsfiddle.net/Harrmonia/124fgr68/1/)

*參考網路資訊*
[ Vue.js 手牽手，一起嗑光全家桶 ] 開胃餐點 - 古早味事件燉畫面綁定(https://www.youtube.com/watch?v=68ItsYcqjHI&list=PLEfh-m_KG4dYor8h4Hi2lqKJ0xqNTFh16&index=5)

*講師個人頻道資料很豐富,情況允許大家多多看完影片廣告,和每個月訂閱扣款donate,當做請講師喝杯咖啡犒賞辛苦無私