Vue 中v-model的完整用法及v-model的實現原理解析
更新時間：2025年02月10日 11:48:05 作者：小余努力搬磚
這篇文章詳細介紹了Vue.js中的v-model指令的使用,包括基本用法、原理、結合不同類型的表單元素（如radio、checkbox、select）以及使用修飾符（如lazy、number、trim）等,感興趣的朋友一起看看吧
一、 v-model的基本使用
v-model雙向綁定，既輸入框的value改變，對應的message對象值也會改變，修改message的值，input的value也會隨之改變。無論改變那個值，另外一個值都會變化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "hello"
}
})
</script>
</body>
</html>二、 v-model的原理
先來一個demo實現不使用v-model實現雙向綁定。
實現雙向綁定需要是用v-bind和v-on，使用v-bind給input的value綁定message對象，此時message對象改變，input的值也會改變。但是改變input的value并不會改變message的值，此時需要一個v-on綁定一個方法，監(jiān)聽事件，當input的值改變的時候，將最新的值賦值給message對象。獲取事件對象，target獲取監(jiān)聽的對象dom，value獲取最新的值。v-model = v-bind + v-on$event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- $event獲取事件對象，$event.target.value獲取input值 -->
<!-- <input type="text" :value="message" @input="changeValue($event.target.value)">{{message}}-->
<!--事件調用方法傳參了，寫函數時候省略了小括號，但是函數本身是需要傳遞一個參數的，這個參數就是原生事件event參數傳遞進去-->
<input type="text" :value="message" @input="changeValue">{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "hello world"
},
methods: {
changeValue(event){
console.log("值改變了");
this.message = event.target.value
}
}
})
</script>
</body>
</html>三、 v-model結合radio類型使用
radio單選框的屬性是互斥的，如果使用v-model，可以不使用name就可以互斥。
v-model綁定`sex`屬性，初始值為“男”，選擇女后`sex`屬性變成“女”，因為此時是雙向綁定。
<div id="app">
<!-- name屬性radio互斥 使用v-model可以不用name就可以互斥 -->
<label for="male">
<input type="radio" id="male" name="sex" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="女" v-model="sex">女
</label>
<div>你選擇的性別是：{{sex}}</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"zzz",
sex:"男"
},
})
</script>四、 v-model結合復選框類型使用
checkbox可以結合v-model做單選框，也可以多選框。
checkbox結合v-model實現單選框，定義變量初始化為，點擊checkbox的值為，也是。isAgree false true isAgree true
checkbox結合v-model實現多選框，定義數組對象，用于存放愛好，將與checkbox對象雙向綁定，此時選中，一個多選框，就多一個true，就添加一個對象。hobbies hobbies hhobbies
單選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--單選框-->
<h2>單選框</h2>
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意協議
</label>
<h3>您的選選擇是：{{isAgree}}</h3>
<button :disabled="!isAgree">下一步</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isAgree: true
}
})
</script>
</body>
</html>多選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--多選框-->
<h2>多選框</h2>
<input type="checkbox" name="hobby" value="籃球" v-model="hobbies">籃球
<input type="checkbox" name="hobby" value="足球" v-model="hobbies">足球
<input type="checkbox" name="hobby" value="羽毛球" v-model="hobbies">羽毛球
<input type="checkbox" name="hobby" value="乒乓球" v-model="hobbies">乒乓球
<h2>你的愛好是：{{hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
hobbies: []
}
})
</script>
</body>
</html>值的綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--多選框-->
<h2>多選框</h2>
<label :for="item" v-for="(item,index) in hhobbies" :key="index">
<input type="checkbox" name="hobby" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
<h2>你的愛好是：{{hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
hobbies: [],
hhobbies: ["籃球","足球","乒乓球","羽毛球"]
}
})
</script>
</body>
</html>五、 v-model結合select
v-model結合select可以單選也可以多選。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-model結合select類型</title>
</head>
<body>
<div id="app">
<!-- select單選 -->
<select name="fruit" v-model="fruit">
<option value="蘋果">蘋果</option>
<option value="香蕉">香蕉</option>
<option value="西瓜">西瓜</option>
</select>
<h2>你選擇的水果是：{{fruit}}</h2>
<!-- select多選 -->
<select name="fruits" v-model="fruits" multiple>
<option value="蘋果">蘋果</option>
<option value="香蕉">香蕉</option>
<option value="西瓜">西瓜</option>
</select>
<h2>你選擇的水果是：{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
fruit:"蘋果",
fruits:[]
},
})
</script>
</body>六、 v-model的修飾符的使用
lazy：默認情況下是實時更新數據，加上，從輸入框失去焦點，按下enter都會更新數據number：默認是字符串類型，使用復制為數字類型trim：用于自動過濾用戶輸入的首尾空白字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-model修飾符</title>
</head>
<body>
<div id="app">
<h2>v-model修飾符</h2>
<h3>lazy,默認情況是實時更新數據，加上lazy，從輸入框失去焦點，按下enter都會更新數據</h3>
<input type="text" v-model.lazy="message">
<div>{{message}}</div>
<h3>修飾符number,默認是string類型，使用number賦值為number類型</h3>
<input type="number" v-model.number="age">
<div>{{age}}--{{typeof age}}</div>
<h3>修飾符trim:去空格</h3>
<input type="text" v-model.trim="name">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"zzz",
age:18,
name:"ttt"
},
})
</script>
</body>
</html>到此這篇關于Vue 中v-model的完整用法（v-model的實現原理）的文章就介紹到這了,更多相關vue v-model用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了記錄--使用el-time-picker默認值遇到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
解決vue-cli項目sourcemap因為文件重名導致的文件定位映射錯誤問題
這篇文章主要介紹了解決vue-cli項目sourcemap因為文件重名導致的文件定位映射錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vuex 單狀態(tài)庫與多模塊狀態(tài)庫詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要介紹了vant的Uploader?文件上傳,圖片數據回顯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
ant design vue動態(tài)循環(huán)生成表單以及自定義校驗規(guī)則詳解
這篇文章主要介紹了ant design vue動態(tài)循環(huán)生成表單以及自定義校驗規(guī)則詳解,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
vue推薦組件化開發(fā)，所以就把每個圖表封裝成子組件，然后在需要用到該圖表的父組件中直接使用。接下來給大家介紹vue 中 echart 在子組件中只顯示一次的問題，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了vue如何把字符串中的所有@內容,替換成帶標簽的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了如何利用vue.js實現拖放功能的相關資料，本文并未使用現有的庫，而是使用內置的HTML拖放API來實現簡單的拖放系統(tǒng)，需要的朋友可以參考下2021-06-06
這篇文章主要介紹了vue-router子路由的實現方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了10分鐘教你快速上手Vue3中新增的API,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09