使用了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如何默认选中单选框的更多相关文章

  1. select()事件默认选中文本框的全部内容,并改变其背景色和文字颜色

    1.select()事件默认选中文本框的全部内容 拿到input标签的节点,调用select()方法即可.但是我做的vue项目中调用了此方法有一个bug,单次点击会全选内容,双次点击的时候全选会闪一下 ...

  2. JS实现单选按钮回显时页面效果出现,但选中单选框的值为空

    最近做了很多前端页面的工作,遇到的一个感觉很头疼的问题在这里记一下: 经常用JS回显单选框,但是明明从页面效果上来看,单选框已经被选中了,可是却不能触发单选框的change事件,取值的时候用某种方法取 ...

  3. 用jquery修改默认的单选框radio或者复选框checkbox选择框样式

    默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控 ...

  4. 取消选中单选框radio的三种方式

    作者: 铁锚 日期: 2013年12月21日 本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DO ...

  5. 分享:三种取消选中单选框radio的方法

    三种取消选中radio的方式,本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的. <!DOCTYPE HTML> <html ...

  6. Vue select默认选中第一个

    <td> <select v-model="selectWare"> <option selected="selected" va ...

  7. vue的表格加单选框

    https://www.cnblogs.com/calamus/p/8569196.html

  8. Vue 单选框与单选框组 组件

    radio组件 v-model  : 通过当然绑定的值与input上的value值来确定当前选中项. 在父作用域中通过active设置当前默认选中项,如果选中项发生改变后通过input事件通知传递到父 ...

  9. Python+Selenium自动化-定位一组元素,单选框、复选框的选中方法

    Python+Selenium自动化-定位一组元素,单选框.复选框的选中方法   之前学习了8种定位单个元素的方法,同时webdriver还提供了8种定位一组元素的方法.唯一区别就是在单词elemen ...

随机推荐

  1. RabbitMQ备份交换器

    备份交换器,AlternateExchange(AE): 备份交换器是为了实现没有路由到队列的消息,与上篇介绍到的mandatory都是为了处理没有路由到的消息. AE相对于mandatory逻辑更简 ...

  2. C# mvc 500 内部服务器访问异常

    20161018 项目发布到IIS上后,无法访问,由于页面默认跳转到异常处理去了,所以详细信息一直查看不了. 在找寻无果,异常信息日志记录无效的情况下,只好一点点来测试了 在异常处理前,就已经试过,a ...

  3. iptables 指令语法

    iptables 指令 语法: iptables [-t table] command [match] [-j target/jump] -t 参数用来指定规则表,内建的规则表有三个,分别是:nat. ...

  4. <转>Python: __init__.py 用法

    转自 http://www.cnblogs.com/BeginMan/p/3183629.html python的每个模块的包中,都有一个__init__.py文件,有了这个文件,我们才能导入这个目录 ...

  5. bs-loading

    根据bootstrap的modal来显示loading动效. 核心内容: 1.图片转base64方法: // 图片压缩-start function run(input_file,get_data){ ...

  6. apache两种工作模式详解

    prefork模式 这个多路处理模块(MPM)实现了一个非线程型的.预派生的web服务器,它的工作方式类似于Apache 1.3.它适合于没有线程安全库,需要避免线程兼容性问题的系统.它是要求将每个请 ...

  7. 使用Btrace来动态监控方法的参数和返回值

    btrace简介: btrace是一种动态跟踪分析一个运行中的Java应用程序的工具,它基于java的探针技术动态地向目标应用程序的字节码注入追踪代码(字节码追踪),这些追踪字节码追踪代码使用Java ...

  8. minix中atoi、atol、atof的实现

    在minix2.0源代码中,有将字符串类型转换为int.long.double类型的函数实现,相关的实现函数分别在atoi.c.atol.c.atof.c文件中,我们来逐一学习其中的源码: 1.int ...

  9. Altium Designer 输出 gerber 光绘文件的详细说明

    Altium Designer 输出 gerber 光绘文件的详细说明 PCB画好后,我们需要输出光绘文件交给制版厂家.由此,输出光绘文件的重要性就显出来了. 先复习一下介绍各层的定义吧,哈哈 (1) ...

  10. Olivia Palermo & Johannes Huebl 模范情侣

    男才女貌,模范情侣-- 以后引用情侣时就用这个图了~ ref: http://bbs.55bbs.com/thread-8250584-1-1.html