Vue的v-model詳解
阿新 • • 發佈：2021-01-24
文章目錄
一，v-model是什麼？
<body> <div id="app"> <input type="text" v-model="msg"> <h2>{{msg}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ msg:'hello', } }) </script> </body>
結果：
二，作用
Vue中使用v-model指令來實現表單元素和資料的雙向繫結。監聽使用者的輸入，然後更新資料。
- 因為input中的v-model綁定了msg,所以會實時將輸入的內容傳遞給msg , msg發生改變。
- 當msg發生改變時,因為上面使用了插值語法將msg的值插入到DOM中,所以DOM會發生響應的改變。所以通過v-model實現了雙向的繫結。
三，原理
v-model本質上是個語法糖，其實現原理包含兩個步驟
- 通過v-bind繫結一個value屬性
- 通過v-on指令給當前元素繫結input事件
<input type="text" :value="msg" v-on:input="msg=$event.target.value">
v-on:input="" 用於動態監聽使用者輸入的資訊，在介面上產生一個事件後，瀏覽器會生成一個event物件，這個event物件就包含了輸入的資訊
四，型別
除了上面的文字型別，v-model還能結合其他型別使用
1. v-model：radio
<div id="app"> <!--當v-model繫結的是同一個變數，可以不加name屬性來實現radio的互斥--> <label for="right"> <input type="radio" id="right" name="judge" value="對" v-model="judge">對 </label> <label for="wrong"> <input type="radio" id="wrong" name="judge" value="錯" v-model="judge">錯 </label> <h2>你的判斷是：{{judge}}</h2> </div> <script> new Vue({ el:'#app', data:{ judge:'對' //目的：選擇之後將值繫結到judge中 } }) </script>
結果：
2. v-model：checkbox
單個複選框
<div id="app">
<label for="ok">
<input type="checkbox" id="ok" v-model="isOk">可以
</label>
<h4>{{isOk}}</h4>
</div>
<script>
new Vue({
el:'#app',
data:{
isOk:false
}
})
</script>
結果：
多個複選框
<div id="app">
<input type="checkbox" value="香蕉" v-model="fruits">香蕉
<input type="checkbox" value="蘋果" v-model="fruits">蘋果
<input type="checkbox" value="梨子" v-model="fruits">梨子
<h4>愛吃的水果是：{{fruits}}</h4>
</div>
<script>
new Vue({
el:'#app',
data:{
fruits:[]
}
})
</script>
結果：
3. v-model：select
<div id="app">
<select name="" id="" v-model="type">
<option value="電影">電影</option>
<option value="動漫">動漫</option>
<option value="電視劇">電視劇</option>
</select>
<h4>喜歡的視訊型別是：{{type}}</h4>
</div>
<script>
new Vue({
el:'#app',
data:{
type:'動漫'
}
})
</script>
結果：
五，修飾符
1. lazy
v-model在預設情況下同步了輸入框的資料，就是說輸入框資料一有改變，對應的data中的資料就會自動發生改變。lazy修飾符可以讓資料在失去焦點之後才更新
<input type="text" v-model.lazy="msg">
2.number
預設情況下，輸入框得到的資料最後都會變成字串形式。number修飾符可以將輸入框得到的內容轉為數字型別。
<input type="text" v-model.number="msg">
3.trim
trim修飾符可以去掉從輸入框獲取的內容的左右兩邊的空格
<input type="text" v-model.trim="msg">