使用vue如何默认选中单选框
使用了vue以后,发现这真的是一个灵活高效的框架,能够轻松实现页面的实时刷新。
那么,今天先聊聊单选框的使用。一般我们使用单选框,会这么写:
//HTML
<input type="radio" name="radios" value="" checked><label>one</label>
<br>
<input type="radio" name="radios" value=""><label>two</label>
<br>
<input type="radio" name="radios" value=""><label>three</label>
有”checked”属性的单选框会默认选中。
但在vue里这是无效的,因为它会跟具体的参数值绑定。(后来看到vue的官网教程,确实写了这么一段:v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。)
//HTML
<input type="radio" name="radios" value="" v-model="param"><label>one</label>
<br>
<input type="radio" name="radios" value="" v-model="param"><label>two</label>
<br>
<input type="radio" name="radios" value="" v-model="param"><label>three</label>
//JS
export default{
data(){
return{
param:'' //设置默认值为1,即设置第一个单选框为选中状态
}
}
}
参考博客:
Vue.js学习笔记——表单控件实践
表单输入绑定——Vue.js
---------------------
作者:sone_yoonyul
来源:CSDN
原文:https://blog.csdn.net/sone_yoonyul/article/details/78421717?utm_source=copy
版权声明:本文为博主原创文章,转载请附上博文链接!
使用vue如何默认选中单选框的更多相关文章
- select()事件默认选中文本框的全部内容,并改变其背景色和文字颜色
1.select()事件默认选中文本框的全部内容 拿到input标签的节点,调用select()方法即可.但是我做的vue项目中调用了此方法有一个bug,单次点击会全选内容,双次点击的时候全选会闪一下 ...
- JS实现单选按钮回显时页面效果出现,但选中单选框的值为空
最近做了很多前端页面的工作,遇到的一个感觉很头疼的问题在这里记一下: 经常用JS回显单选框,但是明明从页面效果上来看,单选框已经被选中了,可是却不能触发单选框的change事件,取值的时候用某种方法取 ...
- 用jquery修改默认的单选框radio或者复选框checkbox选择框样式
默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控 ...
- 取消选中单选框radio的三种方式
作者: 铁锚 日期: 2013年12月21日 本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DO ...
- 分享:三种取消选中单选框radio的方法
三种取消选中radio的方式,本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的. <!DOCTYPE HTML> <html ...
- Vue select默认选中第一个
<td> <select v-model="selectWare"> <option selected="selected" va ...
- vue的表格加单选框
https://www.cnblogs.com/calamus/p/8569196.html
- Vue 单选框与单选框组 组件
radio组件 v-model : 通过当然绑定的值与input上的value值来确定当前选中项. 在父作用域中通过active设置当前默认选中项,如果选中项发生改变后通过input事件通知传递到父 ...
- Python+Selenium自动化-定位一组元素,单选框、复选框的选中方法
Python+Selenium自动化-定位一组元素,单选框.复选框的选中方法 之前学习了8种定位单个元素的方法,同时webdriver还提供了8种定位一组元素的方法.唯一区别就是在单词elemen ...
随机推荐
- PCL—低层次视觉—关键点检测(Harris)
除去NARF这种和特征检测联系比较紧密的方法外,一般来说特征检测都会对曲率变化比较剧烈的点更敏感.Harris算法是图像检测识别算法中非常重要的一个算法,其对物体姿态变化鲁棒性好,对旋转不敏感,可以很 ...
- H.264 White Paper学习笔记(二)帧内预测
为什么要有帧内预测?因为一般来说,对于一幅图像,相邻的两个像素的亮度和色度值之间经常是比较接近的,也就是颜色是逐渐变化的,不会一下子突变成完全不一样的颜色.而进行视频编码,目的就是利用这个相关性,来进 ...
- MyBatis学习之输入输出类型
1. 传递pojo对象 Mybatis使用ognl表达式解析对象字段的值,#{}或者${}括号中的值为pojo属性名称,其中,#{}:占位符号,好处防止sql注入,${}:sql拼接符号, 简要说明 ...
- 如何启动、关闭和设置ubuntu防火墙
如何启动.关闭和设置ubuntu防火墙 引自:http://www.cnblogs.com/jiangyao/archive/2010/05/19/1738909.html 就这句话就够了,下面的可以 ...
- vue实现按需加载(懒加载)
1.router文件中使用 export default new Router({ routes: [{ path: '/', name: 'Post', component: () => im ...
- Android 音视频同步(A/V Sync)
1. 音视频同步原理 1)时间戳 音视频同步主要用于在音视频流的播放过程中,让同一时刻录制的声音和图像在播放的时候尽可能的在同一个时间输出. 解决音视频同步问题的最佳方案就是时间戳:首先选择一个参考 ...
- -bash: locate: command not found
部分版本的linux系统使用locate快速查找某文件路径会报以下错误: -bash: locate: command not found 其原因是没有安装mlocate这个包 安装:yum -y ...
- Linux批量杀死进程
杀死进程在linux中使用kill命令了,我们可以下面来给各位介绍一篇关于Linux下批量杀死进程的例子,希望此例子可以对各位同学带来帮助的哦. 批量杀死包含关键字“php-fpm”的进程. kill ...
- 9.21 form 和Ajax详解
form 表单 参考连接 : http://www.cnblogs.com/liwenzhou/p/8747872.html
- 8.20 前端 js
2018-8-20 17:40:12 js参考: https://www.cnblogs.com/liwenzhou/p/8004649.html 2018-8-20 20:33:31 css学完了 ...