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数学函数Exp使用说明
Aug 09 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
ES6基础之默认参数值
Feb 21 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
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
ftp类(myftp.php)
2006/10/09 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
实例讲解React 组件
2020/07/07 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
对python 读取线的shp文件实例详解
2018/12/22 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
销售员求职个人的自我评价
2014/02/19 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
家长学校工作方案
2014/05/07 职场文书
五年级上册复习计划
2015/01/19 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
《实心球》教学反思
2016/02/23 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
Python实现照片卡通化
2021/12/06 Python
2022年显卡天梯图(6月更新)
2022/06/17 数码科技