el-radio-group change事件案例

以下是一个 el-radio-group 的 change 事件的案例：

<template>
  <div>
    <el-radio-group v-model="selected" @change="handleChange">
      <el-radio label="1">选项1</el-radio>
      <el-radio label="2">选项2</el-radio>
      <el-radio label="3">选项3</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    };
  },
  methods: {
    handleChange(val) {
      console.log(`选中了${val}`);
    }
  }
};
</script>

在上面的代码中，el-radio-group 绑定了一个 v-model，用于绑定当前选中的值，同时绑定了一个 @change 事件，用于监听选项的变化。当选项改变时，handleChange 方法会被触发，同时会打印出选中的值。

相关问题

el-radio-group change事件传参案例

以下是一个 el-radio-group 的 change 事件传参的案例：

<template>
  <div>
    <el-radio-group v-model="selected">
      <el-radio label="1" @change="handleChange('选项1')">选项1</el-radio>
      <el-radio label="2" @change="handleChange('选项2')">选项2</el-radio>
      <el-radio label="3" @change="handleChange('选项3')">选项3</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    };
  },
  methods: {
    handleChange(val) {
      console.log(`选中了${val}`);
    }
  }
};
</script>

在上面的代码中，我们在每个 el-radio 上添加了一个 @change 事件，该事件会触发 handleChange 方法，并且将选项的值作为参数传入。在 handleChange 方法中，我们可以接收到传入的参数，并进行相应的操作。这样我们就可以在 el-radio-group 的 change 事件中传入参数，实现更加灵活的操作。

el-radio-group change事件

el-radio-group是Element UI中的一个单选框组件，change事件是该组件在选项改变时触发的事件。当用户选择不同的选项时，change事件会被触发，可以通过监听该事件来执行相应的逻辑操作。

以下是关于el-radio-group change事件的介绍：
1. 事件名称：change
2. 事件触发时机：当用户选择不同的选项时触发
3. 事件参数：选中的选项的值（value）
4. 事件回调函数：可以通过在el-radio-group上绑定change事件的回调函数来处理选项改变时的逻辑操作

示例代码如下：

<template>
  <el-radio-group v-model="selectedOption" @change="handleOptionChange">
    <el-radio :label="1">选项1</el-radio>
    <el-radio :label="2">选项2</el-radio>
    <el-radio :label="3">选项3</el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 1
    };
  },
  methods: {
    handleOptionChange(value) {
      console.log("选中的选项值：", value);
      // 执行其他逻辑操作
    }
  }
};
</script>