1、v-model結合radio

<label for="male">//value的值通過v-model和sex綁定到了一起<input type="radio" id="male" value="男" v-model="sex">男 </label> <label for="female"><input type="radio" id="female "value="女" v-model="sex">女 </label>data(){return{sex: "男"//默認選擇男} }

2、v-model結合checkbox

2.1 單選框的情況，此時v-model綁定的是Boolean值，選中綁定true，取消綁定false：

<input type="checkbox" v-model="isAgree" >同意協議 <h2>您的選擇是：{{isAgree}} </h2> <button :disabled="!isAgree"> 下一步 //選擇了單選框后才讓點data(){return{isAgree: false //默認未選上} }

效果：

2.2多選框的情況，此時v-model是數組類型

<input type="checkbox" value="籃球" v-model="hobbies"> <input type="checkbox" value="足球" v-model="hobbies"> <input type="checkbox" value="乒乓球" v-model="hobbies"> <input type="checkbox" value="羽毛球" v-model="hobbies"><h2>您的愛好是：{{hobbies}}</h2>data(){return{hobbies: []} }

效果：

2.3動態展示：

<label v-for="item in list" :for="item"><input type="checkbox" :value="item" :id="item " v-model="hobbies">{{item}} </label><h2>您的愛好是：{{hobbies}}</h2>data(){return{list:['籃球','臺球','羽毛球','足球'],hobbies: []} }

3、v-model結合select

3.1單選

<select name="fruit" id="aaa" v-model="fruit"><option value="蘋果">蘋果</option><option value="香蕉">香蕉</option><option value="橘子">橘子</option></select>data(){return{fruie: '香蕉' //默認選擇香蕉} }

3.2多選

<select name="fruit" v-model="fruits" mltiple><option value="蘋果">蘋果</option><option value="香蕉">香蕉</option><option value="橘子">橘子</option></select>data(){return{fruits: [] } }

4、v-model修飾符

4.1 v-mode.lazy ：默認情況下，v-model是實時和data的數據進行綁定的，lazy修飾符可以讓數據在失去焦點或者回車時才更新綁定。

4.2 v-model.number：默認情況下，v-model會把輸入框輸入的無論時數字還是字母都當作字符串進行處理，number修飾符可以讓輸入框輸入的內容自動轉化成數值類型處理。

4.3 v-mode.trim：如果輸入的內容收尾有很多空格，trim修飾符可以自動刪除掉收尾的空格。

總結

以上是生活随笔為你收集整理的v-model详细使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。