vue 实现单选框设置默认选中值

更新时间：2019年11月07日 11:41:50 作者：dong-v

今天小编就为大家分享一篇vue 实现单选框设置默认选中值，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的

html部分是通过v-for取的后台的数据

 <li v-for="(value,i) in addList" :key="value.id">          
   <input class="radio" type="radio" name="radios" :value="i" v-model="radio" />                   
</li>

生成后的代码就是

 <li>        
   <input class="radio" type="radio" name="radios" value="0" v-model="radio" />  
   <input class="radio" type="radio" name="radios" value="1" v-model="radio" />  
   <input class="radio" type="radio" name="radios" value="2" v-model="radio" />                 
</li>

js部分（只需要将v-model的data值设置为想要默认选中的value值即可）

//在data中设置默认选中第一个
radio:'0',

以上这篇vue 实现单选框设置默认选中值就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue动态权限登录实现(基于路由与角色)
很多应用都会需要对不同的用户进行权限控制，本文主要介绍了Vue动态权限登录实现(基于路由与角色)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
vue antd的from表单中验证rules中type的坑记录
这篇文章主要介绍了vue antd的from表单中验证rules中type的坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue组件之间的通信方式详细讲解
对于vue来说，组件之间的消息传递是非常重要的，用vue可以是要组件复用的，而组件实例的作用域是相互独立，这意味着不同组件之间的数据无法互相引用，一般来说，组件之间可以有几种关系，下面是我对组件之间消息传递的常用方式的总结
2022-08-08
vantUI 获得piker选中值的自定义ID操作
这篇文章主要介绍了vantUI 获得piker选中值的自定义ID操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue中三元表达式方法例子
这篇文章主要给大家介绍了关于vue中三元表达式的相关资料,众所周知三元表达式用来根据参数的不同执行不同的代码是很方便的,需要的朋友可以参考下
2023-09-09
uniApp h5项目如何通过命令行打包并生成指定路径及文件名称
用uni-app来写安卓端,近日需要将程序打包为H5放到web服务器上,经过一番折腾,这里给大家分享下,这篇文章主要给大家介绍了关于uniApp h5项目如何通过命令行打包并生成指定路径及文件名称的相关资料,需要的朋友可以参考下
2024-02-02
vue中引入第三方字体文件的方法示例
这篇文章主要介绍了vue中引入第三方字体文件的方法示例，文中讲述了实现方法及其错误的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
5个实用的Vue技巧分享
在这篇文章中,我们将探讨五个实用的 Vue 技巧,这些技巧可以使你日常使用 Vue 编程更高效、更富有成效,感兴趣的小伙伴可以跟随小编一起学习一下
2023-08-08
vue-cli项目中使用Mockjs详解
这篇文章主要介绍了vue-cli项目中使用Mockjs详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
vue3+ts+vant移动端H5项目搭建的实现步骤
本文主要介绍了vue3+ts+vant移动端H5项目搭建，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06