這篇要來介紹，基本常用的一些表單元素，與 Vue 的資料綁定時會如何做
我們一樣先把 Vue 的架構寫出來，只是這次在 data 內新增多個變數來存放不同的表單元素資料:

<script>
var app = new Vue({
    el: '#app',
    data: {
        text: '',
        textarea: '',
        checkboxArray: [],
        checkbox1: false,
        selected: '',
        singleRadio: ''
    }
})
</script>

上述把 Vue 的資料變數都定義好了之後，我們就可以來跟表單元素做綁定，首先是字串的部分:

<div id="app">
    {{ text }}
    <input type="text" v-model="text">
</div>

一樣用 v-model 來綁定 text 這個變數

再來是 textarea 元素:

<div id="app">
    {{ text }}
    <input type="text" v-model="text">
    {{ textarea }}
    <textarea v-model="textarea"></textarea>
</div>

這裡也是使用 v-model 來綁定 textarea 這個變數

接下來就是 checkbox & radio 元素:

<div id="app">
    {{ text }}
    <input type="text" v-model="text">
    {{ textarea }}
    <textarea v-model="textarea"></textarea>
    <input type="checkbox" v-model="checkbox1">
</div>

會發現這個 checkbox 也是用 v-model 來綁定資料，而綁定的是 checkbox1 這個變數
不同於先前，checkbox 跟 radio 只有 true 和 false 這兩個值
所以勾選了就是 true 取消勾選就會是 false，可以用 Vue 開發者工具查看

接著是 checkbox 的多選:

<div id="app">
    {{ text }}
    <input type="text" v-model="text">
    {{ textarea }}
    <textarea v-model="textarea"></textarea>
    <input type="checkbox" v-model="checkbox1">
    
    <input type="checkbox" value="雞肉" v-model="checkboxArray">雞肉
    <input type="checkbox" value="豬肉" v-model="checkboxArray">豬肉
    <input type="checkbox" value="牛肉" v-model="checkboxArray">牛肉
    <p>火鍋裡有<span v-for="item in checkboxArray">{{ item }} </span></p>
</div>

多選的 checkbox 我們是使用 checkboxArray 這個陣列資料變數來做綁定，我們要把我們勾選的多個值，存進去一個陣列內，顯示在頁面上時，我們在用 v-for 迴圈去繞出來

接著是 radio 的單選:

<div id="app">
    {{ text }}
    <input type="text" v-model="text">
    {{ textarea }}
    <textarea v-model="textarea"></textarea>
    <input type="checkbox" v-model="checkbox1">
    
    <input type="checkbox" value="雞肉" v-model="checkboxArray">雞肉
    <input type="checkbox" value="豬肉" v-model="checkboxArray">豬肉
    <input type="checkbox" value="牛肉" v-model="checkboxArray">牛肉
    <p>火鍋裡有<span v-for="item in checkboxArray">{{ item }} </span></p>
    
    <input type="radio" value="雞肉" v-model="singleRadio">雞肉
    <input type="radio" value="豬肉" v-model="singleRadio">豬肉
    <input type="radio" value="牛肉" v-model="singleRadio">牛肉
    <p>火鍋裡有 {{ singleRadio }}</p>
</div>

單選的 radio 元素，我們採用 singleRadio 這個資料變數，當我們勾選到那個選項時，會把值帶進這個變數內
顯示在頁面上時，跟字串的方式一樣

最後是 select 元素:

<div id="app">
    {{ text }}
    <input type="text" v-model="text">
    {{ textarea }}
    <textarea v-model="textarea"></textarea>
    <input type="checkbox" v-model="checkbox1">
    
    <input type="checkbox" value="雞肉" v-model="checkboxArray">雞肉
    <input type="checkbox" value="豬肉" v-model="checkboxArray">豬肉
    <input type="checkbox" value="牛肉" v-model="checkboxArray">牛肉
    <p>火鍋裡有<span v-for="item in checkboxArray">{{ item }} </span></p>
    
    <input type="radio" value="雞肉" v-model="singleRadio">雞肉
    <input type="radio" value="豬肉" v-model="singleRadio">豬肉
    <input type="radio" value="牛肉" v-model="singleRadio">牛肉
    <p>火鍋裡有 {{ singleRadio }}</p>
    
    <select v-model="selected">
        <option value="">-- 請選擇 --</option>
        <option value="小明">小明</option>
        <option value="小美">小美</option>
    </select>
</div>

一樣用 v-model 綁定 selected 這個變數，當選擇到那個選項時，就會把那個選項的 value 帶進變數內，一樣可用 Vue 的開發者工具查看

以上就是常用的表單元素，跟 Vue 的資料做綁定。