v-model结合radio、checkbox、select怎么用

这篇文章主要介绍v-model结合radio、checkbox、select怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联公司专注于企业成都全网营销推广、网站重做改版、高明网站定制设计、自适应品牌网站建设、H5建站、商城网站建设、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为高明等各大城市提供网站开发制作服务。

*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结合radio、checkbox、select怎么用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

网站标题：v-model结合radio、checkbox、select怎么用
URL标题：https://www.cdcxhl.com/article46/gjijhg.html

成都网站建设公司_创新互联，为您提供全网营销推广、静态网站、Google、品牌网站制作、商城网站、域名注册

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联