Vue中綁定input,通常使用"v-model"指令。當使用v-model指令綁定一個表單控件時,可以最小化與Vue實例的耦合。這是因為v-model指令把表單控件的值和Vue實例的數據雙向綁定在一起。
<div id="app"> <p>{{ message }}</p> <input type="text" v-model="message" /> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>
在這個例子中,我們有一個Vue實例,和一個v-model綁定在一個input元素上。我們初始化實例的數據,在input里綁定message。我們在模板中使用{{message}}引用了實例數據。當我們更改輸入框里面的內容,這個數據也會自動被更新呈現。
通常,使用v-model綁定表單控件更加方便、直觀,并避免了程序員手動監聽變化,通過JavaScript修改數據這些麻煩的操作。當然,還有其他屬性,如type="checkbox"、type="radio"、value、checked等。在這些情況,v-model的行為會稍有不同,不過監聽數據的變化和同步的方法都類似。值得注意的是在一些表單控件上,如radio和checkbox,HTML的值會被Vue視為字符串,而不是原始的input值。因此,在表單控件的不同屬性下使用v-model需要謹慎。
可以通過給表單控件綁定一個鍵盤事件的監聽器,去自定義輸入框的行為。例如,我們可以實現用enter鍵代替點擊"提交"按鈕的作用。
<div id="app"> <p>{{ message }}</p> <input type="text" v-model="message" v-on:keyup.enter="submit" /> </div> <script> var app = new Vue({ el: '#app', data: { message: '' }, methods: { submit: function () { alert(this.message); } } }) </script>
在這個例子中,我們用v-on指令加上事件類型(keyup)來綁定監聽器。我們也可以用@符號來代替v-on,這是官方建議的縮略語。然后,我們給監聽器傳遞一個參數(在這個例子中是"enter"),告訴它只有在enter鍵按下時,才會觸發事件。最后,在Vue實例的methods中定義提交函數,把this.message的值彈出來。
綁定表單可是是Vue的基礎,同時也是非常有用的基礎。Vue使我們能夠輕松快捷的處理表單中的各種情況,同時還能充分利用Vue實例的數據雙向綁定機制。值得一提的是,在Vue 3.0中,v-model的默認行為被修改了,需要注意。不過,我們可以通過v-model綁定自定義輸入框,降低復雜度,提高代碼可讀性。在表單控件中,Vue的綁定機制可以很好的應對各種需求。