使用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 ...
随机推荐
- U盘安装centos7:不能载入到安装界面
在用U盘安装centos7时,我们需要修改镜像位置: 选择第一项:Install CentOS 7 ,按 e(也有可能是tab键)键进入编辑界面. 将 vmlinuz initrd=initrd.im ...
- MegaCli 使用
安装: wget ftp://rpmfind.net/linux/Mandriva/devel/cooker/x86_64/media/non-free/release/megacli-8.02.21 ...
- PowerDesigner快捷键【转】
一般快捷键 快捷键 说明 F4 打开检查模型窗口,检查模型 F5 如果图窗口内的图改变过大小,恢复为原有大小即正常大小 F6 放大图窗口内的图 F7 缩小图窗口内的图 F8 在图窗口内中查看全部图内容 ...
- 【加解密专辑】对接触到的PGP、RSA、AES加解密算法整理
先贴代码,有空再整理思路 PGP加密 using System; using System.IO; using Org.BouncyCastle.Bcpg; using Org.BouncyCastl ...
- c++ istream转换为std::string
std::istreambuf_iterator<char> eos; std::string s(std::istreambuf_iterator<char>(stream) ...
- android studio下生成jni头文件
cd app/src/main javah -d jni -classpath ../../build/intermediates/classes/debug net.sourceforge.lame ...
- Clojure学习之defmulti
1. defmulti 宏defmulti 和defmethod 经常被用在一起来定义 multimethod. 宏defmulti 的参数包括一个方法名以及一个dispatch函数,这个dispat ...
- IIS6配置后仍然无法解析json文件解决办法
两台服务器,都是Windows Server2003,照着以下办法设置后,一台可以访问到json文件,一台不可以. 1. MIME设置: 在IIS的站点属性的HTTP头设置里,选MIME 映射中点击” ...
- oracle索引优化
零.概述 在这之前,一直都是使用mysql来进行开发或者部署.最近及今后很长一段时间都要使用oracle,今天和同事也遇到一个oracle 慢查询问题.查了很多资料,这里记录备忘.持续更新ing... ...
- PCB常见的拓扑结构 (转)
常见的拓扑结构有: 1.点对点拓扑 point-to-point scheduling 该拓扑结构简单,整个网络的阻抗特性容易控制,时序关系也容易控制,常见于高速双向传输信号线:常在源端加串行 ...