iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
1
自我挑戰組

新手初探 Vue系列 第 9

鐵人賽Day09 - 表單與資料雙向綁定

這篇要來介紹,基本常用的一些表單元素,與 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 這個變數
不同於先前,checkboxradio 只有 truefalse 這兩個值
所以勾選了就是 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 的資料做綁定。


上一篇
鐵人賽Day08 - 動態加上 class
下一篇
鐵人賽Day10 - 基礎語法整理
系列文
新手初探 Vue30

尚未有邦友留言

立即登入留言