这篇文章为大家带来有关v-model的使用方法。大部分知识点都是大家经常用到的，为此分享给大家做个参考。一起跟随小编过来看看吧。

v-model其实是一个语法糖，它的背后本质上是包含两个指令操作：

1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件*

v-model结合单选框使用

<label for="male"><input type="radio" name="sex" id="male" value="男" v-model="sex" />男</label><label for="female"><input type="radio" name="sex" id="female" value="女" v-model="sex" />女</label><h4>您的性别是{{sex}}</h4>

v-model结合checkbox的使用

单个checkbox<input type="checkbox" name="" id="" value="" v-model="isAgree" />同意协议<br /><br /><button :disabled="!isAgree">下一步</button>多个checkbox<input type="checkbox" name="" id="" value="篮球" v-model="hobbies"/> 篮球<input type="checkbox" name="" id="" value="足球" v-model="hobbies"/>足球<input type="checkbox" name="" id="" value="排球" v-model="hobbies"/>排球<input type="checkbox" name="" id="" value="羽毛球" v-model="hobbies"/>地球<input type="checkbox" name="" id="" value="棒球" v-model="hobbies"/>棒球 <h4> 您的爱好是{{hobbies}}</h4>

v-model结合select的使用

<select name="car" v-model="cars">

<option value="宝马">五菱宏光</option> <option value="奔驰">兰博基尼</option> <option value="保时捷">玛莎拉蒂</option> <option value="宝马">劳斯莱斯</option> <option value="宝马">凯迪拉克</option></select><select name="nvyou" v-model="nvyous" multiple> <option value ="小泽玛利亚">小泽玛</option> <option value ="苍井空">三上悠</option> <option value="吉泽明步">吉泽明</option> <option value="松岛枫">泷泽萝</option> <option value="早乙女露依">早乙女</option></select>

关于v-model的使用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。