Vue表單雙向繫結

什麼是雙向資料繫結

　　Vue.js 是一個 MVVM 框架，即資料雙向繫結，即當資料發生變化的時候，檢視也就發生變化，當檢視發生變化的時候，資料也會跟著同步變化。這也算是 Vue.js 的精髓之處了。

值得注意的是，我們所說的資料雙向繫結，一定是對於 UI 控制元件來說的，非 UI 控制元件不會涉及到資料雙向繫結。單向資料繫結是使用狀態管理工具的前提。如果我們使用vuex，那麼資料流也是單項的，這時就會和雙向資料繫結有衝突。

在表單中使用雙向資料繫結

你可以用v-model指令在表單<input>、<textarea>及<select>

它負責監聽使用者的輸入事件以更新資料，並對一些極端場景進行一些特殊處理。

注意：v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 例項的資料作為資料來源。你應該通過 JavaScript 在元件的 data 選項中宣告初始值!

• 單行文字

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

 
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

    //viewModel 實現與Model雙向繫結，動態更新檢視
    var vm = new Vue({
        el:"#app",
        data: {
            message : ""
    },
    });
</script>

• 多行文字

<div id="app">
    多行文字：<textarea v-model="message"></textarea>&nbsp;&nbsp;多行文字是：{{message}}

 
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

    //viewModel 實現與Model雙向繫結，動態更新檢視
    var vm = new Vue({
        el:"#app",
        data: {
            message : ""
        }
    });
</script>

• 單複選框

<div id="app">
    單複選框：
    <input type="checkbox" id="checkbox" v-model="checked">
    &nbsp;&nbsp;
    {{checked}}

</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

    //viewModel 實現與Model雙向繫結，動態更新檢視
    var vm = new Vue({
        el:"#app",
        data: {
            checked : false
        }
    });
</script>

• 下拉框

<div id="app">
    下拉框：
    <select v-model="selected">
        <!--<option disabled value="">請選擇</option>-->
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>選中的值: {{ selected }}</span>

</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

    //viewModel 實現與Model雙向繫結，動態更新檢視
    var vm = new Vue({
        el:"#app",
        data: {
            selected : false
        }
    });
</script>

注意：如果v-model表示式的初始值未能匹配任何選項， 元素將被渲染為“未選中”狀態。在 iOS 中，這會使使用者無法選擇第一個選項。因為這樣的情況下，iOS 不會觸發 change 事件。因此，更推薦像上面這樣提供一個值為空的禁用選項。