Vue.js前端开发实例｜使用v-model创建一组单选按钮

Vue.js是一套构建用户界面的渐进式框架，摘用自底向上增量开发的设计，非常轻易与其他库或已有项目整合，在与相关工具和支持库一起使用时，能完美地驱动复杂的单页使用。

本系列所有Vue.js代码基于Vue.js 2.6.11，在IntelliJ IDEA 2019.2.3环境编写完成，在最新版的“搜狗高速浏览器”和“Google Chrome浏览器”测试成功。所有源代码不需要下载Vue.js的其他文件，在测试或使用时保持网络畅通即可。

下面这个实例演示了使用v-model创建一组单选按钮。

01

实例功能

此实例主要通过使用v-model将input元素与Vue实例的数据属性绑定，以确定用户究竟单击了哪一个单选按钮。当在浏览器中展示页面时，任意单击不同的单选按钮，则抉择(单选)结果分别如图1和图2所示。

展开全文

■ 图1

■ 图2

02

实现代码

在上面这段代码中，v-model="myName"表达input元素与Vue实例的数据属性myName进行双向绑定，即当input元素发生转变时，对应的Vue实例的数据属性myName也同步发生转变；反之亦然。

此实例的源文件是MyCode＼ChapD＼ChapD019.html。

03

源代码下载

关注微信公众号，后台回复要害词 “ Vue.js代码185” 即可获得完全源代码。

* 在测试代码时，必须保持网络畅通。

04

参考图书

《Bootstrap+Vue.js前端开发超实用代码集锦》

ISBN：978-7-302-56815-5

罗帅 罗斌 编著

定价：99.8元

扫码优惠购书