el-radio 点击事件
时间: 2024-11-07 20:08:38 浏览: 7
elementUi vue el-radio 监听选中变化的实例代码
5星 · 资源好评率100%
`el-radio` 是 Element UI 中的一个组件,它用于创建单选按钮。当你点击 `el-radio` 时,会触发一个内置的 `click` 或者 `input` 事件。这两个事件通常对应于用户交互时的选择动作。
1. `click` 事件:当用户点击 radio 标签时,这个事件会被触发。你可以通过绑定一个处理器函数来处理用户的点击行为,比如获取当前选择的值或更新状态。
2. `input` 事件:这是 Vue.js 自带的事件,主要用于数据双向绑定。当 radio 的值改变时(比如由于用户手动选择),`input` 事件会自动触发,并将新的值传递给处理器函数。
示例代码:
```html
<template>
<el-radio-group v-model="selectedValue">
<el-radio label="option1" @click="handleClick">Option 1</el-radio>
<el-radio label="option2">Option 2</el-radio>
<el-radio label="option3">Option 3</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
handleClick(e) {
console.log('Radio clicked:', e);
}
};
}
};
</script>
```
在这个例子中,`handleClick` 函数会在每次点击 `el-radio` 时被调用,并打印出所选选项。
阅读全文