vue表單的示例分析

這篇文章給大家分享的是有關(guān)vue表單的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

一、基本用法

你可以用 v-model 指令在表單 <input> 及 <textarea> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。

但 v-model 本質(zhì)上不過(guò)是語(yǔ)法糖。它負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理。

v-model 會(huì)忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源。你應(yīng)該通過(guò) JavaScript 在組件的 data 選項(xiàng)中聲明初始值。

一組代碼，看完text、textarea、radio、checkbox、select的基本用法：

<div id="app7">
  <input type="text" v-model="message"><label>{{message}}</label></br>
  <textarea v-model="message1"></textarea><label>{{message1}}</label></br>
  <!--單選按鈕在單獨(dú)使用時(shí),不需要v-model,直接使用v-bind 綁定一個(gè)布爾類型的值,為真時(shí)選中,為否時(shí)不選-->
  <input type="radio" :checked="picked"><label>單選按鈕</label></br>
  <!--如果是組合使用來(lái)實(shí)現(xiàn)互斥選擇的效果,就需要v-model 配合value來(lái)使用：-->
  <input type="radio" v-model="sex" value="boy"><label>男</label>
  <input type="radio" v-model="sex" value="girl"><label>女</label></br>
  <!--復(fù)選框使用數(shù)組類型的數(shù)據(jù)匹配-->
  <input type="checkbox" v-model="hobby" value="跑步"><label>跑步</label>
  <input type="checkbox" v-model="hobby" value="爬山"><label>爬山</label>
  <input type="checkbox" v-model="hobby" value="滑雪"><label>滑雪</label></br>
  <!--單選時(shí)的選擇框,多選時(shí)加multiple屬性就可以了-->
  <!--但我們一般都不用原生的這種下拉框，不美觀，擴(kuò)展功能也不好，一般會(huì)用插件或自己封裝一個(gè)-->
  <select v-model="select">
   <option disabled value="">請(qǐng)選擇</option>
   <option>html</option>
   <option value="js">javascript</option>
   <option>css</option>
  </select>
  <!--用 v-for 渲染的動(dòng)態(tài)選項(xiàng)-->
  <select v-model="selected">
   <option v-for="option in options" :value="option.value">
    {{option.text}}
   </option>
  </select>
 </div>

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' }
  ]
 }
});

二、值綁定

單選按鈕、復(fù)選框和選擇列表在單獨(dú)使用或單選的模式下， v-model 綁定的值是一個(gè)靜態(tài)字符串或布爾值， 但在業(yè)務(wù)中，有時(shí)需要綁定一個(gè)動(dòng)態(tài)的數(shù)據(jù)， 這時(shí)可以用v-bind 來(lái)實(shí)現(xiàn)。

一組代碼，看完表單常用radio、checkbox、select的值綁定：

 <div id="app8">
  <!--單選按鈕,利用value動(dòng)態(tài)綁定，在選中時(shí)，app.picked === app.value, 值都是boy-->
  <input type="radio" v-model="picked" :value="value">
  <label>單選按鈕</label>
  <p>{{picked}}</p>
  <p>{{value}}</p>

  <!--復(fù)選框,利用true-value與false-value動(dòng)態(tài)綁定,勾選時(shí),app.toggle == app.value1; 未勾選時(shí)，app.toggle == app.value2-->
  <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
  <label>復(fù)選框</label>
  <p>{{toggle}}</p>
  <p>{{value1}}</p>
  <p>{{value2}}</p>

  <!--選擇列表,當(dāng)選中時(shí),app.selected 是一個(gè)Object ，所以app.selected.number == 123-->
  <select v-model="selected">
   <option :value="{number:123}">123</option>
  </select>
  {{selected.number}}
 </div>

var app8 = new Vue({
 el: '#app8',
 data:{
  picked: false,
  value: 'boy',
  toggle: false,
  value1: 'a',
  value2: 'b',
  selected: ''
 }
});

三、修飾符

 與事件的修飾符類似， v-model 也有修飾符，用于控制數(shù)據(jù)同步的時(shí)機(jī)。

一組代碼，看完常用修飾符lazy、number、trim

<div id="app9">
  <!-- .lazy:
  在輸入框中， v-model 默認(rèn)是在input 事件中同步輸入框的數(shù)據(jù)（除了提示中介紹的中文輸入法情況外），
  使用修飾符.lazy 會(huì)轉(zhuǎn)變?yōu)樵赾hange 事件中同步，這時(shí)，message 并不是實(shí)時(shí)改變的，而是在失焦或按回車時(shí)才更新。-->
  <input type="text" v-model.lazy="message">
  <p>{{message}}</p>
  <!--.number:
  使用修飾符.number 可以將輸入轉(zhuǎn)換為Number 類型，否則雖然你輸入的是數(shù)字，但它的類型其實(shí)是String ，比如在數(shù)字輸入框時(shí)會(huì)比較有用-->
  <input type="text" v-model.number="number">
  <p>{{typeof number}}</p>
  <!-- .trim:
  修飾符.trim 可以自動(dòng)過(guò)濾輸入的首尾空格-->
  <input type="text" v-model="text">
  <p>{{text}}</p>
 </div>
var app9 = new Vue({
 el: '#app9',
 data:{
  message: '',
  number: '',
  text: ''
 }
});

感謝各位的閱讀！關(guān)于“vue表單的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！