前言
本文使用了lable关联选中，实际使用中如果不需要，直接将循环语句 v-for 写在 input标签上就可以
1、使用v-for循环的radio单选框
01）需要注意的是，这是使用的是change事件，而不是click点击事件
<template><div><label v-for="(item, index) in radioData" :key="index"><inputtype="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点击事件
<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单选框 获取当前项（每一项）的value值》对你有帮助，请点赞、收藏，并留下你的观点哦！
