vue radio单选框,获取当前项(每一项)的value值操作
https://www.jb51.net/article/195312.htm
前言
本文使用了lable关联选中,实际使用中如果不需要,直接将循环语句 v-for 写在 input标签上就可以
1、使用v-for循环的radio单选框
01)需要注意的是,这是使用的是 change 事件,而不是 click 点击事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <template> <div> <label v- for = "(item, index) in radioData" :key= "index" > <input type= "radio" v-model= "radioVal" :value= "item.value" @change= "getRadioVal" /> {{ item.value }} </label> </div> </template> <script> export default { data() { return { radioData: [ { value: '全部' }, { value: '部分' }, { value: '零散' } ], radioVal: '全部' // 用于设置默认选中项 }; }, methods: { getRadioVal() { console.log( this .radioVal); } } }; </script> |
2、不使用v-for循环的radio单选框
01)需要注意的是,这是使用的是 change 事件,而不是 click 点击事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <template> <div> <label><input v-model= "radioVal" type= "radio" value= "全部" @change= "getRadioVal" >全部</label> <label><input v-model= "radioVal" type= "radio" value= "部分" @change= "getRadioVal" >部分</label> <label><input v-model= "radioVal" type= "radio" value= "零散" @change= "getRadioVal" >零散</label> </div> </template> <script> export default { data() { return { radioVal: '全部' // 用于设置默认选中项 }; }, methods: { getRadioVal() { console.log( this .radioVal); } } }; </script> |
点击每一项获得当前项的value值,使用v-for 和不使用v-for 实现的效果是一样的
这里就不分开写效果图了
如果本篇文章对你有帮助的话,很高兴能够帮助上你。
补充知识:vue绑定单选框(radio)和复选框(CheckBox)
html部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | < div style = "width:500px;margin:50px auto;display:flex;flex-direction:column;" > < div style = "font-weight:600;font-size:18px" >问卷调查</ div > < div v-for = "(item,index) in question" :key = "index" style = "padding-top:10px" > < div style = "margin-bottom:10px" >{{item.title}}</ div > < div v-if = "item.sex" style = "display:flex;align-items:center;" > < div v-for = "(item2,index2) in item.sex" :key = "index2" @ click = "chooseSex(item2)" style = "margin-right:20px" > < input type = "radio" :value = "item2" v-model = "radio2" > < span > {{item2}}</ span > </ div > </ div > < div v-if = "item.item" style = "display:flex;align-items:center;" > < div v-for = "(item3,index3) in item.item" :key = "index3" @ click = "chooseHobbied(item3)" style = "margin-right:20px" > < input type = "checkbox" :value = "item3" v-model = "checkbox" >< span > {{item3}}</ span > </ div > </ div > </ div > </ div > |
vue数据绑定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | data() { return { radio2: '' , checkbox:[], question:[ { title: "1、请选择你的性别" , sex:[ '男' , '女' ] }, { title: "2、请选择你的爱好" , item:[ '打球' , '读书' , '画画' , '游泳' , '跑步' ] } ], }; }, |
js部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //单选框radio选中值的改变 chooseSex(item){ this .radio2 = item; console.log( "点击" ,item, "值" , this .radio2); }, //复选框checkbox多项选择后的值,及取消选中后的其他值 chooseHobbied(item){ if (box.indexOf(item) === -1){ box.push(item); this .checkbox = box; console.log( "点击" ,item, "值" ,box); } else { box.splice(box.indexOf(item),1); console.log( "box值" ,box); this .checkbox = box; } }, |
以上这篇vue radio单选框,获取当前项(每一项)的value值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li><a href="/article/159814.htm" title="vue+element UI实现树形表格带复选框的示例代码" target="_blank">vue+element UI实现树形表格带复选框的示例代码</a></li><li><a href="/article/194834.htm" title="Vue自定义组件双向绑定实现原理及方法详解" target="_blank">Vue自定义组件双向绑定实现原理及方法详解</a></li></ul>
</div>
</div>