使用了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. C#后台传入数据JS接收

    今天碰到个问题,就是后台传入的数据,在JS中for循环的时候,下面那个j根本就不会往上加.所以只能将后台传入的对象,转换为json格式,由js进行解析后生成js中的对象 @{j=0;} for (va ...

  2. django进阶-1

    前言: 各位久等了,django进阶篇来了. 一.get与post 接口规范: url不能写动词,只能写名词 django默认只支持两种方式: get, post get是获取数据 ?user=zcl ...

  3. Delphi应用程序的调试(六)步进式代码调试

    步进式代码调试(Stepping Through Your Code) 步进式代码调试是最基本的调试操作之一,但仍要在此讲述.人们常常容易犯只见树木不见森林的错误.经常复习基本的知识有助于读者了解以前 ...

  4. 二分法求平方根(Python实现)

    使用二分法(Bisection Method)求平方根. def sqrtBI(x, epsilon): assert x>0, 'X must be non-nagtive, not ' + ...

  5. Kafka+Storm+HDFS 整合示例

    消息通过各种方式进入到Kafka消息中间件,比如可以通过使用Flume来收集日志数据,然后在Kafka中路由暂存,然后再由实时计算程序Storm做实时分析,最后将结果保存在HDFS中,这时我们就需要将 ...

  6. [Apio2008]免费道路[Kruscal]

    3624: [Apio2008]免费道路 Time Limit: 2 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 1292  Solved:  ...

  7. JS的压缩、混淆、加密

    参考: 博客园:js压缩.混淆和加密 知乎:前端如何给 JavaScript 加密(不是混淆)?  (阿里聚安全有回答问题) 站长工具  (在线JS压缩加密工具) Obfuscator (在家JS压缩 ...

  8. 关于linux例行任务crontab的使用

    Linux 例行性任务(也叫周期性任务)命令使用:crontab1.crontab -l   查看当前用户的任务2.crontab -e  编辑(设置)当前用户的任务,执行行不用重启crond服务.3 ...

  9. 【CF917D】Stranger Trees 树形DP+Prufer序列

    [CF917D]Stranger Trees 题意:给你一棵n个点的树,对于k=1...n,问你有多少有标号的n个点的树,与给出的树有恰好k条边相同? $n\le 100$ 题解:我们先考虑容斥,求出 ...

  10. iOS8跳转到系统设置页

    版权声明:本文为博主原创文章,未经博主允许不得转载. 大家都知道,在iOS5.0时时可以跳转到系统的设置页的.但是在5.1之后就不可以了. 刚才研究了下这个问题,发现只有iOS8可以跳转到系统设置里自 ...