vue radio单选框，获取当前项（每一项）的value值

前言

本文使用了lable关联选中，如果不需要，直接将循环语句 v-for 写在 input标签上即可

1.使用v-for循环示例

注意：需使用 change 事件，不是 click 事件

<template>
  <div>
    <label v-for="(item, index) in list" :key="index">
      <input
        type="radio"
        v-model="activeValue"
        :value="item.value"
        @change="getRadioValue"
      />
      {{ item.value }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { value: '全部' },
        { value: '部分' },
        { value: '零散' }
      ],
      activeValue: '全部' // 默认选中项
    };
  },
  methods: {
    getRadioValue() {
      console.log(this.activeValue);
    }
  }
};
</script>

2.不使用v-for循环示例

注意：需使用 change 事件，不是 click 事件

<template>
  <div>
    <label><input v-model="activeValue" type="radio" value="全部" @change="getRadioValue">全部</label>
    <label><input v-model="activeValue" type="radio" value="部分" @change="getRadioValue">部分</label>
    <label><input v-model="activeValue" type="radio" value="零散" @change="getRadioValue">零散</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeValue: '全部' // 默认选中项
    };
  },
  methods: {
    getRadioValue() { 
      console.log(this.activeValue);
    }
  }
};
</script>

3.效果图

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。