在之前的範例掩飾中，我們透過一個下拉式選單更改後來改變網頁中的值，實現的方法有兩種：

1. 不使用框架，透過Script進行資料更新與畫面更新
2. 使用vue框架，透過更新vue中的數據，讓畫面自動更新

V-Model

當然因為我們已經在學習框架了，所以當然比較推崇透過方法2來完成這件事，但今天要分享另外一個作法，他能讓我們利用更快的方式來完成這個效果，也就是v-model，大家可以參考下面的程式碼：

HTML
<div id="app">
    <p>
        <select v-model="type">
            <option value="Frontend">Frontend</option>
            <option value="Backend">Backend</option>
        </select>
    </p>
    <p>
        <select v-model="name">
            <option value="Vue">Vue</option>
            <option value="React">React</option>
            <option value="Angular">Angular</option>
            <option value="Laravel">Laravel</option>
            <option value="CakePHP">CakePHP</option>
            <option value="Django">Django</option>
        </select>
    </p>
    <p>Type: {{ type }}</p>
    <p>Framework: {{ name }}</p>
</div>

Javascript
const app = Vue.createApp({
    data() {
        return {
            type: 'Frontend',
            name: 'Vue',
        }
    },
}).mount('#app');

仔細看看程式碼，你會發現並沒有任何的Script去協助更新數值與畫面，但其結果卻相同。

範例檔

是不是更方便了！但當然如果情況稍微複雜一些，還是透過呼叫Method來處理會具有更多的彈性。
除此了Input text以外，還有許多的表單元素能夠透過v-model來進行資料綁定：

HTML
<div id="app" style="display:flex">
    <div style="width: 50%;">
        <p><input v-model="inputValue"></p>
        <p>
            <input type="checkbox" v-model="checkboxValue" id="Item1" value="Item1">
            <label for="Item1">Item1</label>
            <input type="checkbox" v-model="checkboxValue" id="Item2" value="Item2">
            <label for="Item2">Item2</label>
            <input type="checkbox" v-model="checkboxValue" id="Item3" value="Item3">
            <label for="Item3">Item3</label>
        </p>
        <p>
            <input type="radio" id="Frontend" value="Frontend" v-model="radioValue">
            <label for="Frontend">Frontend</label>
            <input type="radio" id="Backend" value="Backend" v-model="radioValue">
            <label for="Backend">Backend</label>
        </p>
        <p>
            <select v-model="selectValue">
                <option disabled value="" selected>Please select one</option>
                <option value="Option1">Option1</option>
                <option value="Option2">Option2</option>
                <option value="Option3">Option3</option>
            </select>
        </p>
        <p><textarea v-model="textareaValue"></textarea></p>
    </div>
    <div style="width: 50%;">
        <p>Input: {{ inputValue }}</p>
        <p>Checkbox: {{ checkboxValue }}</p>
        <p>Radio: {{ radioValue }}</p>
        <p>Select: {{ selectValue }}</p>
        <p>Textarea: {{ textareaValue }}</p>
    </div>
</div>

const app = Vue.createApp({
    data() {
        return {
            inputValue: '',
            checkboxValue: [],
            radioValue: '',
            selectValue: '',
            textareaValue: '',
        }
    },
}).mount('#app');

範例檔

修飾符

同樣在v-model中也能加入一些修飾符來加強運用，可以使用的修飾符如下：

• v-model.lazy: 在文字方塊onChange時才會觸發更新。
• v-model.number: 將輸入值轉換為數值格式。
• v-model.trim: 去除欄位中的前後空白字元。

雙向資料綁定在前、後端分離的開發模式下，更能夠發揮他的優勢，可以讓我們少寫許多頁面更新的程式，也就是我們前面提到事半功倍的框架效果。