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 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
深入研究React中setState源码
Nov 17 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
详解vue中v-for的key唯一性
May 15 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生成静态页面详解
2006/11/19 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
繁简字转换功能
2006/07/19 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
js document.write()使用介绍
2014/02/21 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
实习自我鉴定范文
2013/10/30 职场文书
卫生巾广告词
2014/03/18 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python