话不多说，直接上代码：

<label v-for="(item,index) in radioData" :key="index">
      <input type="radio" :value="item.value" @click="getRadioVal(item.value)">    
      {{item.value}}
</label>

<script>
export default {
  data () {
    return {
      radioData:[
        {value: '5年',id:'5'},
        {value: '10年',id:'10'},
        {value: '20年',id:'20'},
        {value: '长期有效',id:'30'},
      ]
    };
  },
  methods: {
    getRadioVal (value) {
        console.log(value);
    }
  }
}
</script>

2.不使用v-for循环的radio单选框
 

<template>
  <div>
    <label><input type="radio" value="01" @click="getRadioVal">5年</label>
    <label><input type="radio" value="02" @click="getRadioVal">10年</label>
    <label><input type="radio" value="03" @click="getRadioVal">20年</label>
  </div>
</template>
<script>
export default {
  methods: {
    getRadioVal (event) { 
        let radioVal = event.target.value;  
        console.log(radioVal);
    }
  }
}
</script>

点击每一项获得当前项的value值，使用v-for 和不使用v-for 实现的效果是一样的

如遇问题，欢迎留言，博主会第一时间回复您