# [Vue.js] 表單製作方式
###### tags: `Vue.js`

表單需以<select>搭配<option value值>為組成元素，追蹤vue可採用v-model與data的變數做綁定。

* 直譯式

<select name="" id="" class="form-control" v-model="selected">
    <option disabled value="">請選擇</option>
    <option value="小美">小美</option>
    <option value="可愛小妞">可愛小妞</option>
    <option value="漂亮阿姨">漂亮阿姨</option>
  </select>
  <p>小明喜歡的女生是 {{ selected }}。</p>


* 搭配v-for取得陣列資料

<!-- 如何使用v-for來製作select資料 -->
  <select name="" id="" class="form-control" v-model="selected2" >
    <option disabled value="">請選擇</option>
  <option :value="item" v-for="item in selectData">{{item}}</option>    <!-- 將data裡的陣列使用for迴圈取出 -->

  </select>
  <p>小明喜歡的女生是 {{ selected2 }}。</p>

var app = new Vue({
  el: '#app',
  data: {
    singleRadio: '',
    selected: '',
    selectData: ['小美', '可愛小妞', '漂亮阿姨'],
    selected2: '',