# V-model 不同形式表單 (2-3)
###### tags: `Vue`、`2. 指令語法全介紹`

### input & textarea
* input : name = '小明'

  <input type="text" class="form-control" v-model="name">
  {{ name }}

* textarea : text = '一段文字敘述'

<textarea cols="30" rows="3" class="form-control" v-model="text"></textarea>
 {{ text }}

### CheckBox
* 單選框 : checkAnswer = true

<p>{{ checkAnswer ? '吃飽了' : '還沒'}}</p>
<div class="form-check">
    <input type="checkbox" class="form-check-input" id="check1" v-model='checkAnswer'>
    <label class="form-check-label" for="check1">小明回覆</label>
</div>

* 單選框延伸 (自訂勾選後結果) : checkAnswer2 = true

 <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check2" v-model = "checkAnswer2" true-value = "吃飽了" false-value = "還沒吃飽">
    <label class="form-check-label" for="check2">小明回覆</label> 
 </div>

* 複選框 : checkAnswer3 = []

<p>{{ checkAnswer3.join(' ') }}</p>
  <div class="form-check">
        <input type="checkbox" class="form-check-input" id="check3" v-model = "checkAnswer3" value="蛋餅" >
        <label class="form-check-label" for="check3" >蛋餅</label>
  </div>
  
  <div class="form-check">
        <input type="checkbox" class="form-check-input" id="check4" v-model = "checkAnswer3" value="蘿蔔糕" >
        <label class="form-check-label" for="check4" >蘿蔔糕</label>
  </div>
  
  <div class="form-check">
        <input type="checkbox" class="form-check-input" id="check5"  v-model = "checkAnswer3"  value="豆漿" >
        <label class="form-check-label" for="check5">豆漿</label>
  </div>

### Radio 單選框
radioAnswer = ''

<p>{{ radioAnswer }}</p>
  <div class="form-check">
        <input type="radio" class="form-check-input" id="radio1" value="蛋餅" v-model='radioAnswer' >
        <label class="form-check-label" for="radio1">蛋餅</label>
  </div>
  
  <div class="form-check">
        <input type="radio" class="form-check-input" id="radio2" value="蘿蔔糕" v-model='radioAnswer'>
        <label class="form-check-label" for="radio2">蘿蔔糕</label>
  </div>
  
  <div class="form-check">
        <input type="radio" class="form-check-input" id="radio3" value="豆漿" v-model='radioAnswer'>
        <label class="form-check-label" for="radio3">豆漿</label>
  </div>

### select
* 單選: selectAnswer = ''

<p>{{ selectAnswer }}</p>
 <select class="form-select"  v-model = "selectAnswer">
        <option value="" selected disabled >說吧，你要吃什麼？</option>
        <option v-for="item in products" :key="item.neme" :value="item.name">{{ item.name }} / {{ item.price }} / {{ item.vegan?'可素食':'不可素食' }}</option>
 </select>

* 複選: selectAnswer2 =[]

<p>{{ selectAnswer2 }}</p>
  <select class="form-select" multiple v-model="selectAnswer2">
        <option selected disabled value="">說吧，你要吃什麼？</option>
        <option :value="item.name" v-for="item in products" :key="item.name">
        {{item.name}} / {{item.price}} 元</option>
  </select>