Vue表單輸入綁定的示例代碼

更新時(shí)間：2018年11月01日 10:40:02 作者：若水若魚(yú)

這篇文章主要介紹了Vue表單輸入綁定的示例代碼，本文使用v-model指令在表單input創(chuàng)建雙向數(shù)據(jù)綁定，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

基礎(chǔ)用法

你可以用v-model指令在表單input，textarea以及select元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類(lèi)型自動(dòng)選取正確的方法來(lái)更新元素。盡管有些神奇，但是v-model本質(zhì)上不過(guò)是語(yǔ)法糖。它負(fù)責(zé)監(jiān)聽(tīng)用戶(hù)的輸入事件以更新數(shù)據(jù)。

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

(1) 文本

<input v-model="message" placehoder="edit me">

(2) 多行文本

<textarea v-model="message"></textarea>

(3) 復(fù)選框

單個(gè)復(fù)選框，綁定到布爾值：

<input type="checkbox" v-model="checked">

多個(gè)復(fù)選框，綁定到同一個(gè)數(shù)組：

<div id='example-3'>
 <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
 <label for="jack">Jack</label>
 <input type="checkbox" id="john" value="John" v-model="checkedNames">
 <label for="john">John</label>
 <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
 <label for="mike">Mike</label>
 <br>
 <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
 el: '#example-3',
 data: {
  checkedNames: []
 }
})

(4) 單選按鈕

<div id="example-4">
 <input type="radio" id="one" value="One" v-model="picked">
 <label for="one">One</label>
 <br>
 <input type="radio" id="two" value="Two" v-model="picked">
 <label for="two">Two</label>
 <br>
 <span>Picked: {{ picked }}</span>
</div>

new Vue({
 el: '#example-4',
 data: {
  picked: ''
 }
})

(5) 選擇框

單選時(shí)：

<div id="example-5">
 <select v-model="selected">
  <option disabled value="">請(qǐng)選擇</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
 </select>
 <span>Selected: {{ selected }}</span>
</div>

new Vue({
 el: '...',
 data: {
  selected: ''
 }
})

如果 v-model 表達(dá)式的初始值未能匹配任何選項(xiàng)，<select> 元素將被渲染為“未選中”狀態(tài)。在 iOS 中，這會(huì)使用戶(hù)無(wú)法選擇第一個(gè)選項(xiàng)。因?yàn)檫@樣的情況下，iOS 不會(huì)觸發(fā) change 事件。因此，更推薦像上面這樣提供一個(gè)值為空的禁用選項(xiàng)。

多選時(shí)（綁定到一個(gè)數(shù)組）

<div id="example-6">
 <select v-model="selected" multiple style="width: 50px;">
  <option>A</option>
  <option>B</option>
  <option>C</option>
 </select>
 <br>
 <span>Selected: {{ selected }}</span>
</div>

new Vue({
 el: '#example-6',
 data: {
  selected: []
 }
})

值綁定

對(duì)于單選按鈕，復(fù)選框以及選擇框的選項(xiàng)，v-model綁定的值通常是靜態(tài)字符串(對(duì)于復(fù)選框也可以是布爾值)：

<!-- 當(dāng)選中時(shí)，`picked` 為字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 為 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 當(dāng)選中第一個(gè)選項(xiàng)時(shí)，`selected` 為字符串 "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

(1) 復(fù)選框

<input
 type="checkbox"
 v-model="toggle"
 true-value="yes"
 false-value="no"
>

這里的 true-value 和 false-value 特性并不會(huì)影響輸入控件的 value 特性，因?yàn)闉g覽器在提交表單時(shí)并不會(huì)包含未被選中的復(fù)選框。如果要確保表單中這兩個(gè)值中的一個(gè)能夠被提交，(比如“yes”或“no”)，請(qǐng)換用單選按鈕。

(2) 單選按鈕

<input type="radio" v-model="pick" v-bind:value="a">
// 當(dāng)選中時(shí)
vm.pick === vm.a

修飾符

(1) .lazy

在默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 (除了上述輸入法組合文字時(shí))。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進(jìn)行同步：

(2) .number

如果想自動(dòng)將用戶(hù)的輸入值轉(zhuǎn)為數(shù)值類(lèi)型，可以給 v-model 添加 number 修飾符

(3) trim

如果要自動(dòng)過(guò)濾用戶(hù)輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：

示例：

 // >>>>>>> html
  <div id="app" >
    <!-- 輸入框綁定 -->
    <input v-model='massage' placeholder="輸入信息" >
    <p>massage is:{{ massage }}</p>
    <hr>
    <!-- 單個(gè)選框綁定，返回值為布爾值 -->
    <p>單個(gè)選框綁定，返回值為布爾值:</p>
    <input v-model='radioStatus' type="checkbox" name="isAgree">
    <br>
    <label>數(shù)據(jù):{{radioStatus}}</label>

    <hr>
    <!-- 多個(gè)選框綁定到同一個(gè)數(shù)據(jù) -->
    <div>
      <p> 多個(gè)選框綁定同一個(gè)數(shù)據(jù): </p>
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label>
      <input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label>
      <br>
      <!-- checkedNames 為一個(gè)數(shù)組 [] -->
      <span>數(shù)據(jù): {{ checkedNames }}</span>         
    </div>
    <hr>
    <div>
      <p>單選按鈕數(shù)據(jù):</p>
      <input type="radio" id="one" value="1" v-model="sex"><label for="one">{{stantic.garder[1]}}</label>
      <input type="radio" id="two" value="2" v-model="sex"><label for="two">{{ stantic.garder[2] }}</label>
      <input type="radio" id="three" value="3" v-model="sex"><label for="three">{{ stantic.garder[3] }}</label>      
      <br>
      <!-- sex === 選中的input的value -->
      <span>性別代碼: {{ sex }}；性別：{{stantic.garder[sex]}}</span>
    </div>
    <hr>
    <div>
      <p>選擇列表:</p>
      <select v-model="selected">
        <option disabled value="">請(qǐng)選擇</option>
        <option value="001" >北京</option>
        <option value="003" >天津</option>
        <option value="008" >上海</option>
      </select>
      <span>Selected: {{ selected }}</span>    
    </div>
    <hr>
    <div>
      <h3>值綁定：</h3>
      <p>
        對(duì)于單選按鈕，勾選框及選擇列表選項(xiàng)，v-model 綁定的 value 通常是靜態(tài)字符串 (對(duì)于勾選框是邏輯值)： 
        <br>
        但是有時(shí)我們想綁定 value 到 Vue 實(shí)例的一個(gè)動(dòng)態(tài)屬性上，這時(shí)可以用 v-bind 實(shí)現(xiàn)，并且這個(gè)屬性的值可以不是字符串。

      </p>
      <!-- vm.toggle 和 vm.stantic.isOrNot 綁定 -->
      <label>是否畢業(yè)：</label>
      <input type="checkbox" name="" v-model='toggle' v-bind:true-value=stantic.isOrNot[1] v-bind:false-value=stantic.isOrNot[0] >
      <!-- 選中時(shí) vm.toggle === stantic.isOrNot[1] 未選中時(shí) vm.toggle === stantic.isOrNot[0] -->
      <p>您選擇了：{{toggle}}</p>
      
      <h4>選擇列表的值綁定字面量對(duì)象:</h4> 
      <select v-model="selected2">
        <!-- 內(nèi)聯(lián)對(duì)象字面量 -->
        <option v-bind:value="{ number: 123 }">123</option>
        <option v-bind:value="{ number: 456 }">456</option>
        <option v-bind:value="{ number: 789 }">789</option>
      </select>
      <span>vm.selected={{selected2}}</span>
    </div>
    <hr>
    <div>
      <h3>修飾符</h3>
      
      <h4>.lazy</h4>
      <p>在默認(rèn)情況下，v-model 在 <mark>input</mark> 事件中同步輸入框的值與數(shù)據(jù) (除了 上述 IME 部分)，但你可以添加一個(gè)修飾符 lazy ，從而轉(zhuǎn)變?yōu)樵?<mark>change</mark> 事件中同步：</p>
      <input v-model.lazy='massage' >
      <p>輸入完成，信息改變：{{massage}}</p>
      
      <h4>.number</h4>
      <p>如果想自動(dòng)將用戶(hù)的輸入值轉(zhuǎn)為 Number 類(lèi)型 (如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值)，可以添加一個(gè)修飾符 number 給 v-model 來(lái)處理輸入值：</p>
      <!-- vm.age的值類(lèi)型是Number -->
      <input type="number" v-model.number='age' >
      <span>類(lèi)型為：{{ typeof age }}</span>

      <h4>.trim</h4>
      <p>如果要自動(dòng)過(guò)濾用戶(hù)輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過(guò)濾輸入：</p>
      <input v-model.trim='massage' > 
    </div>
  </div>
 

 //    >>>>>>js

  // 基礎(chǔ)用法 v-model
  let vm = new Vue({
    el:'#app',
    data:{
      massage:'',
      radioStatus:false,
      checkedNames:[],
      sex:'',
      age:'',
      toggle:'',
      selected:'',
      selected2:'',
      stantic:{
        garder:{
          1:'男',
          2:'女',
          3:'不確定'
        },
        Hobbies:{

          1:'電影',
          2:'美食',
          3:'游戲',
          4:'科技'
        },
        isOrNot:{
          1:'是',
          0:'否'
        }
      }
    }

  });

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: