Vue.js表單輸入繫結

表單輸入繫結

對於Vue 來說，使用v-bind 並不能解決表單域物件雙向繫結的需求。所謂雙向繫結，就是無論是透過input 還是透過Vue 物件，都能修改繫結的資料物件的值。Vue 提供了v-model 進行雙向繫結。本章將重點講解表單域物件的雙向繫結方法和技巧。

實現雙向資料繫結

對於資料的繫結，不管是使用插值表示式（{{}} ）還是v-text 指令，對於資料間的互動都是單向的，只能將Vue 例項裡的值傳遞給頁面，頁面對資料值的任何操作卻無法傳遞給model 。

MVVM 模式最重要的一個特性，可以說是資料的雙向繫結，而Vue 作為一個MVVM 框架，肯定也實現了資料的雙向繫結。在Vue 中使用內建的v-model 指令完成資料在View 與Model 間的雙向繫結。

可以用v-model 指令在表單<input> 、<textarea> 及<select> 元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。儘管有些神奇，但v-model 本質上不過是語法糖。它負責監聽使用者的輸入事件以更新資料，並對一些極端場景進行一些特殊處理。

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

單行文字輸入框

下面講解最常見的單行文字輸入框的資料雙向繫結。

【例10.1 】繫結單行文字輸入框（原始碼\ch10\10.1.html ）。

<div id="app">
    <input type="text" v-model="message" value="hello world">
    <p>{{message}}</p>
</div>
<!--引入vue檔案-->
<script src="
<script>
    //建立一個應用程式例項
    const vm= Vue.createApp({
        //該函式返回資料物件
        data(){
          return{
            message:"紅羅袖裡分明見"
           }
        }
    //在指定的DOM元素上裝載應用程式例項的根元件
    }).mount('#app');
</script>

在Chrome 瀏覽器中執行程式，效果如圖10-1 所示；在輸入框中輸入“白玉盤中看卻無”，可以看到下面的內容也發生了變化，如圖10-2 所示。

多行文字輸入框

本節演示在多行文字輸入框textarea 標籤中繫結message 屬性。

【例10.2 】繫結多行文字輸入框（原始碼\ch10\10.2.html ）。

<div id="app">
    <p>{{message}}</p>
    <textarea v-model="message"></textarea>
</div>
<!--引入vue檔案-->
<script src="
<script>
    //建立一個應用程式例項
    const vm= Vue.createApp({
        //該函式返回資料物件
        data(){
          return{
            message:"輕衣軟履步江沙"
           }
        }
    //在指定的DOM元素上裝載應用程式例項的根元件
    }).mount('#app');
</script>

在Chrome 瀏覽器中執行程式，效果如圖10-3 所示；在textarea 標籤中輸入多行文字，效果如圖10-4 所示。

本文節選自《 Vue 3.x 從入門到精通 ( 影片教學版）》，內容釋出獲得作者和出版社授權。