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

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

V-Model

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

<div id="app">
    <p>
        <select v-model="framework.type">
            <option value="Frontend">Frontend</option>
            <option value="Backend">Backend</option>
        </select>
    </p>
    <p>
        <select v-model="framework.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: {{ framework.type }}</p>
    <p>Framework: {{ framework.name }}</p>
</div>

<script>
const { reactive } = Vue;
const app = {
    setup(){
        const framework = reactive({
            type: "Frontend",
            name: "Vue",
        })
        return {framework};
    }
}
const myVue = Vue.createApp(app).mount("#app");
</script>

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

範例檔

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

<div id="app" style="display:flex">
    <div style="width: 50%;">
        <p><input v-model="state.inputValue"></p>
        <p>
            <input type="checkbox" v-model="state.checkboxValue" id="Item1" value="Item1">
            <label for="Item1">Item1</label>
            <input type="checkbox" v-model="state.checkboxValue" id="Item2" value="Item2">
            <label for="Item2">Item2</label>
            <input type="checkbox" v-model="state.checkboxValue" id="Item3" value="Item3">
            <label for="Item3">Item3</label>
        </p>
        <p>
            <input type="radio" id="Frontend" value="Frontend" v-model="state.radioValue">
            <label for="Frontend">Frontend</label>
            <input type="radio" id="Backend" value="Backend" v-model="state.radioValue">
            <label for="Backend">Backend</label>
        </p>
        <p>
            <select v-model="state.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="state.textareaValue"></textarea></p>
    </div>
    <div style="width: 50%;">
        <p>Input: {{ state.inputValue }}</p>
        <p>Checkbox: {{ state.checkboxValue }}</p>
        <p>Radio: {{ state.radioValue }}</p>
        <p>Select: {{ state.selectValue }}</p>
        <p>Textarea: {{ state.textareaValue }}</p>
    </div>
</div>

<script>
const { reactive } = Vue;
const app = {
    setup() {
        const state = reactive({
            inputValue: "",
            checkboxValue: [],
            radioValue: "",
            selectValue: "",
            textareaValue: "",
        })
        return {
            state
        };
    }
}
const myVue = Vue.createApp(app).mount("#app");
</script>

範例檔

修飾符

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

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

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