vue 表单之通过v-model绑定单选按钮radio


Posted in Javascript onMay 13, 2019

用v-model绑定单选框能带来很多便捷的开发体验。

基础用法

<template>
 <div id="app">
 <input type="radio" id="male" value="Male" v-model="gender"> Male
 <input type="radio" id="female" value="Female" v-model="gender"> Femalea

 <p>{{gender}}</p>
 </div>
</template>

<script>
export default {
 name: 'app',
 data () {
 return {
  gender: ''
 }
 }
}
</script>

vue 表单之通过v-model绑定单选按钮radio

新建一个名为 gender 的数据模型,通过 v-model 把两个单选按钮都绑定 gender , <p> 也绑定了 gender ,所以单选按钮选了哪项,都会把对应的 value 值赋给 gender , 从而使 <p> 的内容也发生变化。

通过 v-model 绑定,Vue会帮我们解决分组问题。以前使用单选按钮时,是需要设置 name 属性的,现在用 v-model 的话,就不用设置 name 属性了。

默认值

如果需要在页面第一次加载的时候就有一个默认选项,可以在数据模型里直接使用对应的 value 值。

比如希望页面在第一次加载时默认选中 Male。

<template>
 <div id="app">
 <input type="radio" id="male" value="Male" v-model="gender"> Male
 <input type="radio" id="female" value="Female" v-model="gender"> Female

 <p>{{gender}}</p>
 </div>
</template>

<script>
export default {
 name: 'app',
 data () {
 return {
  gender: 'Male'
 }
 }
}
</script>

只要把数据模型里的 gender 的值改成“Male”即可。

当然,这个值是不能随便写的。一般是需要写上其中一个单选按钮的 value 值。

如果随便写一个字符串也不会报错,最后的作用其实和空字符串一样。

总结

以上所述是小编给大家介绍的vue 表单之通过v-model绑定单选按钮radio,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js获取div高度的代码
Aug 09 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
JS中的函数与对象的创建方式
May 12 #Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 #Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 #Javascript
浅谈vue.use()方法从源码到使用
May 12 #Javascript
Vue安装浏览器开发工具的步骤详解
May 12 #Javascript
微信小程序缓存过期时间的使用详情
May 12 #Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 #Javascript
You might like
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
PHP的自定义模板引擎
2017/03/24 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
Javascript typeof 用法
2008/12/28 Javascript
jquery 常用操作方法
2010/01/28 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
自考自我鉴定范文
2013/10/30 职场文书
售后专员岗位职责
2013/12/08 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
浅谈如何保证Mysql主从一致
2022/03/13 MySQL