el-radio-group的选中事件
时间: 2024-09-15 09:04:27 浏览: 35
`el-radio-group`是Element UI库中的一个组件,它用于创建一组单选按钮。当其中的一个radio选项被用户选择时,会触发一个内置的"change"事件。这个事件会在所有radio元素中默认被监听,并在用户交互时返回当前被选中的radio的值或对象。
事件通常这样绑定和处理:
```html
<el-radio-group v-model="selectedValue" @change="handleChange">
<el-radio label="option1">Option 1</el-radio>
<el-radio label="option2">Option 2</el-radio>
<!-- 更多选项... -->
</el-radio-group>
<script>
export default {
data() {
return {
selectedValue: '',
};
},
methods: {
handleChange(value) {
console.log('当前选中的值:', value);
// 可在此处进行进一步的操作
},
},
};
</script>
```
在这个例子中,`@change`是v-on指令用于绑定了事件处理器`handleChange`,当用户选择新的选项时,`handleChange`函数会被调用并传入所选radio的值作为参数。
相关问题
el-radio-group默认选中
el-radio-group 默认选中的选项是通过 v-model 来实现的。在引用[3]的例子中,通过将 v-model 绑定到 data 中的 radio 变量,可以设置 el-radio-group 的默认选中项。在例子中,radio 的初始值为 3,所以 el-radio-group 默认选中的选项是 label 值为 3 的备选项。
中的代码片段示例:
```
<template>
<el-radio-group v-model="radio">
<el-radio :label="1">备选项</el-radio>
<el-radio :label="2">备选项</el-radio>
<el-radio :label="3">备选项</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
radio: 3
};
}
}
</script>
```
所以 el-radio-group 默认选中的是 label 值为 3 的备选项。
el-radio-group 默认选中
在使用 el-radio-group 组件时,可以通过设置 v-model 绑定的值来设置默认选中的单选按钮。例如:
<el-radio-group v-model="selectedRadio">
<el-radio label="Option 1"></el-radio>
<el-radio label="Option 2"></el-radio>
<el-radio label="Option 3"></el-radio>
</el-radio-group>
data() {
return {
selectedRadio: 'Option 2'
}
}
这样在页面渲染时,Option 2 单选按钮将被默认选中。
阅读全文