Vue.js的v-model(表單輸入)

表單輸入綁定

基礎用法

咱們能夠利用 v-model 指令來實現數據與模版的雙向綁定,它會根據控件類型自動選取正確的方法來更新元素。儘管有些神奇，但 v-model 本質上不過是語法糖，它負責監聽用戶的輸入事件以更新數據，並特別處理一些極端的例子。

v-model 會忽略全部表單元素的 value、checked、selected 特性的初始值。由於它會選擇 Vue 實例數據來做爲具體的值。你應該經過 JavaScript 在組件的 data 選項中聲明初始值。

文本

<div id="box">
    <p>{{msg}}</p>
    <input type="text" v-model="msg"/>
</div>

var vm = new Vue({
    el:"#box",
    data:{
        msg:'hi girl'
    }
})

結果

多行文本

<div id="box">
    <p>{{msg}}</p>
    <textarea v-model="msg" v-model="msg"></textarea>
</div>

var vm = new Vue({
    el:"#box",
    data:{
        msg:'hi girl'
    }
})

結果

複選框

<div id="box">
    <input type="checkbox" id="checkbox" v-model="msg">
</div>

var vm = new Vue({
    el:"#box",
    data:{
        msg:true
    }
})

結果

單選

<div id="box">
    <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>

var vm = new Vue({
    el:"#box",
    data:{
        picked:''
    }
})

結果

選擇列表

<div id="box">
    <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>

var vm = new Vue({
    el:"#box",
    data:{
        selected: ''
    }
})

結果

若是 v-model 表達初始的值不匹配任何的選項，< select > 元素就會以」未選中」的狀態渲染。在 iOS 中，這會使用戶沒法選擇第一個選項，由於這樣的狀況下，iOS 不會引起 change 事件。所以，像以上提供 disabled 選項是建議的作法。
多選列表（綁定到一個數組）：

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

var vm = new Vue({
    el:"#box",
    data:{
        selected: []
    }
})

結果

綁定 value

對於單選按鈕，勾選框及選擇列表選項， v-model 綁定的 value 一般是靜態字符串（對於勾選框是邏輯值）：

<!-- 當選中時，`picked` 爲字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 爲 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 當選中時，`selected` 爲字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>

可是有時咱們想綁定 value 到 Vue 實例的一個動態屬性上，這時能夠用 v-bind 實現，而且這個屬性的值能夠不是字符串。

複選框

<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">

// 當選中時
vm.toggle === vm.a
// 當沒有選中時
vm.toggle === vm.b

單選按鈕

<input type="radio" v-model="pick" v-bind:value="a">

// 當選中時
vm.pick === vm.a

選擇列表設置

<select v-model="selected">
    <!-- 內聯對象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// 當選中時
typeof vm.selected // => 'object'
vm.selected.number // => 123

修飾符

• .lazy

• .number

• .trim

.lazy

在默認狀況下， v-model 在 input 事件中同步輸入框的值與數據 (除了 上述 IME 部分)，但你能夠添加一個修飾符 lazy ，從而轉變爲在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

若是想自動將用戶的輸入值轉爲 Number 類型（若是原值的轉換結果爲 NaN 則返回原值），能夠添加一個修飾符 number 給 v-model 來處理輸入值：

<input v-model.number="age" type="number">

這一般頗有用，由於在 type="number" 時 HTML 中輸入的值也老是會返回字符串類型。

.trim

若是要自動過濾用戶輸入的首尾空格，能夠添加 trim 修飾符到 v-model 上過濾輸入：

<input v-model.trim="msg">