Vue 提供了v--model指令誊涯， 用于雙向綁定表單類元素上 view 與 view-model 的數(shù)據(jù)
基礎用法
v-model 會忽略所有表單元素的 value、checked蒜撮、selected 特性的初始值而總是將 Vue 實例的數(shù)據(jù)作為數(shù)據(jù)來源暴构。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。
單行文本
<div id="app">
<input type="text" v-model="msg"><br>
你輸入的是： {{ msg }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
msg: ''
}
})
</script>
多行文本
與單行文本類似:
<textarea name="" id="" cols="30" rows="4" v-model="msg">
我是多行文本的初始值
</textarea>
正如開頭提到的，所顯示的值只依賴于所綁定的數(shù)據(jù)丹壕，不再關心初始化時的插入的value
image.png
單選按鈕
<div id="app">
<input type="radio" name="pets" value="cat" v-model="petName">貓貓 <br>
<input type="radio" name="pets" value="dog" v-model="petName">狗狗 <br>
現(xiàn)在選中的是： {{petName}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
petName: ''
}
})
</script>
復選框
單個復選框
單個復選框庆械，直接綁定到布爾值
<div id="app">
v-model: <input type="checkbox" v-model="checked"> {{ checked }} <br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
checked: false
}
})
</script>
多個復選框
多個復選框，綁定到同一個數(shù)組：
<div id="app">
<input type="checkbox" value="cat" id="cat" v-model="arr">
<label for="cat">cat</label><br>
<input type="checkbox" value="dog" id="dog" v-model="arr">
<label for="dog">dog</label><br>
<input type="checkbox" value="bird" id="bird" v-model="arr">
<label for="bird">bird</label>
<br>
你選中了 ： {{ arr }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
arr: []
}
})
下拉框
單選下拉框
單選時菌赖， 初始化最好綁定到字符串
<div id="app">
<select v-model="selected">
<option disabled value="">請選擇</option>
<!-- vue建議提供一個值為空的禁用選項 -->
<option value="cat">貓貓</option>
<option value="dog">狗狗</option>
<option value="bird">小鳥</option>
</select>
<br> 你選中了 ： {{ selected }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
selected: '' //初始化最好給定字符串
}
})
</script>
多選下拉框
多選時缭乘，綁定一個數(shù)組
<div id="app">
<select v-model="selected" multiple>
<option disabled value="">請選擇</option>
<!-- vue建議提供一個值為空的禁用選項 -->
<option value="cat">貓貓</option>
<option value="dog">狗狗</option>
<option value="bird">小鳥</option>
</select>
<br> 你選中了 ： {{ selected }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
值綁定
對于單選按鈕，復選框及下拉框的選項琉用，v-model 綁定的值通常是靜態(tài)字符串 (對于復選框也可以是布爾值)堕绩。
但是有時我們可能想把值綁定到 Vue 實例的一個動態(tài)屬性上，這時可以用 v-bind 實現(xiàn)邑时，并且這個屬性的值可以不是字符串奴紧。
單選按鈕
只需要用v--bind給單個單選框綁定一個value值，此時晶丘，v--model綁定的就是他的value值
<div id="app">
<input type="radio" v-bind:value='msg' v-model="pick">單選框<br>
v-bind: {{ msg }} <br>
v-model: {{ pick }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
msg: 'msg',
pick: 'pick'
}
})
</script>
// 當選中時 app.msg === app.pick
當選中時 app.msg === app.pick
復選框
true-value 當選中時
false-value 當沒有被選中時
<div id="app">
<input type="checkbox"
v-model="toggle"
v-bind:true-value= "value1"
v-bind:false-value="value2">點擊<br>
toggle當前的值： {{ toggle}} <br>
選中: {{ toggle === value1 }} <br>
未被選中: {{ toggle === value2 }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
toggle: 'toggle',
value1: '我被選中了~',
value2: '我沒有被選中'
}
})
</script>
下拉框
<div id="app">
<select v-model="selected" >
<option v-bind:value="{a:1}">A</option>
</select>
當選中時黍氮，selected 的值為： {{selected}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
修飾符
.lazy
v--model默認是在input輸入時實時同步輸入框的數(shù)據(jù)，而lazy修飾符浅浮，可以使其使用 change 事件進行同步（在失去焦點或者敲回車鍵之后再更新）沫浆。
來個 demo 感受一下
.number
自動將用戶的輸入值轉為數(shù)值類型
這通常很有用，因為即使在 type="number" 時滚秩，HTML 輸入元素的值也總會返回字符串专执。
.trim
trim 自動過濾輸入過程中首尾輸入的空格
