大家可以用 v-model 指令在表單控制項元素上建立雙向資料綁定。這篇文章主要介紹了vue表單詳解,需要的朋友可以參考下 一、基本用法 你可以用v-model指令在表單 及 元素上建立雙向資料綁定。 </p> <p>但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。 </p> <p>v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的資料作為資料來源。你應該透過 JavaScript 在元件的 data 選項中聲明初始值。 </p> <p>一組程式碼，看完text、textarea、radio、checkbox、select的基本用法：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><p id="app7"> <input type="text" v-model="message"><label>{{message}}</label></br> <textarea v-model="message1">{{message1}} 单选按钮 男 女 跑步 爬山 滑雪 请选择 html javascript css {{option.text}} var app7 = new Vue({ el: '#app7', data:{ message: '单行文本', message1: '多行文本', picked: true, sex: 'boy', hobby: ['爬山','滑雪'], select: 'css', selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } });登入後複製二、值綁定單選按鈕、複選框和選擇清單在單獨使用或單選的模式下， v-model 綁定的值是一個靜態字串或布林值， 但在業務中，有時需要綁定一個動態的數據， 這時可以用v-bind 來實現。 一組程式碼，看完表單常用radio、checkbox、select的值綁定： 单选按钮 {{picked}} {{value}} 复选框 {{toggle}} {{value1}} {{value2}} 123 {{selected.number}} var app8 = new Vue({ el: '#app8', data:{ picked: false, value: 'boy', toggle: false, value1: 'a', value2: 'b', selected: '' } });登入後複製三、修飾符## 與事件的修飾符類似， v-model 也有修飾符，用來控制資料同步的時機。 一組程式碼，看完常用修飾符lazy、number、trim {{message}} {{typeof number}} {{text}} var app9 = new Vue({ el: '#app9', data:{ message: '', number: '', text: '' } });登入後複製上面是我整理給大家的，希望今後會對大家有幫助。 相關文章： Ajax中瀏覽器與伺服器互動詳解 #零基礎學習AJAX之AJAX框架 #零基礎學習AJAX之製作自動校驗的表單
