這次帶給大家vue表單使用案例詳解，vue表單使用的注意事項有哪些，下面就是實戰案例，一起來看一下。 一、基本用法 你可以用v-model 指令在表單 及 元素上建立雙向<a href="http://www.php.cn/code/7876.html" target="_blank">資料綁定</a>。 </p> <p style="text-align: left;">但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。 </p> <p style="text-align: left;">v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的資料作為資料來源。你應該透過 <a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript</a> 在元件的 data 選項中聲明初始值。 </p> <p style="text-align: left;">一組程式碼，看完text、textarea、radio、checkbox、select的基本用法：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><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: '' } });登入後複製相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ 推薦閱讀： 如何正確解決Vue 專案中遇到跨域問題 怎麼使用vue-cli axios請求方式及跨域處理#
