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 实现单选框设置默认选中值就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js实现单选框、复选框和下拉框示例

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

  • Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

    Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下面给大家介绍Vue.js表单标签中的单选按钮.复选按钮和下拉列表的取值问题. 摘要: 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 一.单选按钮 单选按钮:单选按钮用

  • vue 表单之通过v-model绑定单选按钮radio

    vue 表单之通过v-model绑定单选按钮radio

    用v-model绑定单选框能带来很多便捷的开发体验. 基础用法 <template> <div id="app"> <input type="radio" id="male" value="Male" v-model="gender"> Male <input type="radio" id="female" value=&q

  • element-ui中的select下拉列表设置默认值方法

    element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来 那如何修改呢? 上element-ui中的代码片段 <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key=&qu

  • 基于vue.js中关于下拉框的值默认及绑定问题

    一.今天遇到vue中下拉框问题,故而写点东西留个脚印 <template> <select v-model='selected' @click="disable()"> <option v-for="(option,index) in options" v-bind:value="option.value" :disabled="option.disabled"> {{ option.tex

  • 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-mod

  • vue radio单选框,获取当前项(每一项)的value值操作

    前言 本文使用了lable关联选中,实际使用中如果不需要,直接将循环语句 v-for 写在 input标签上就可以 1.使用v-for循环的radio单选框 01)需要注意的是,这是使用的是 change 事件,而不是 click 点击事件 <template> <div> <label v-for="(item, index) in radioData" :key="index"> <input type="ra

  • 解决vue 更改计算属性后select选中值不更改的问题

    先上代码: //... <body> <div id="qwe"> <select v-model="selected"> <option v-for="item in da" :value="item.value">{{item.value}}</option> </select> <span>{{selected}}</span>

  • select标签设置默认选中的选项方法

    方法有两种. 第一种 通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. < select id = "sel" > < option value = "1" >1</ option > < option value = "2" selected = "selected" >2</ option > <

  • JQuery判断radio（单选框）是否选中和获取选中值方法总结

    一.利用获取选中值判断选中 直接上代码,别忘记引用JQuery包 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • php radio 单选框获取与保持值的实现代码

    php 读取单选按钮radio值 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>php 读取单选按钮radio值</title> </head>

  • jquery select 设置默认选中的示例代码

    代码如下: 其中<%=selectedvalue %>为从后台获取的值 $(document).ready(function(){   $("#seltype").attr("value",parseInt('<%=selectedvalue %>')); })

  • 关于element-ui 单选框默认值不选中的解决

    关于element-ui 单选框默认值不选中的解决

    目录 element-ui 单选框默认值不选中 看我的下图吧 element-ui单选框组件,默认选中无效 element-ui 单选框默认值不选中 初次使用elementui单选框 发现一个问题 按照官网的案例 我cv过来 发现不对劲  怎么默认值不选中 如下图 ,难道我cv没cv正确??? 心里那个气啊,难道我发现了element-ui bug了???好的在cv一遍 还是发现默认值不选中,我就好 好看el-radio各个属性,依然百思不得其解,后来研究了一下,原来是自己的菜导致默认值不选中的

  • JS获取文本框,下拉框,单选框的值的简单实例

    1.文本框 1.1 <input type="text" name="test" id="test"> 通过var t=document.getElementById("test").value把值赋给变量t, 1.2 当然也可以反过来把已知的变量值赋给文本框,例如: var m = "5";document.getElementById("test").value= m;

  • JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)

    JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)

    先上三张效果图:     这些功能在Java Web开发中可能是经常需要的,虽然很简单却使很实用的功能,这里记录下以免忘记. 1. 先说表单提交前验证:后台经常用到(这里是提交后统一验证,及时验证请参考我另一篇文章 http://blog.csdn.net/jianzhonghao/article/details/52503431) 1.1 通过submit 按钮提交后 会根据form的属性action="路径"来跳转到相应的路径,这时,给form添加一个 onsubmit =&quo

随机推荐