Vue的el-radio是一個常用的單選框組件,可以通過click、change等事件來監聽用戶的選擇。下面我們來看一下el-radio click事件的使用示例。
<template> <div> <el-radio v-model="radio" label="1" @click="handleRadioClick">選項1</el-radio> <el-radio v-model="radio" label="2" @click="handleRadioClick">選項2</el-radio> <el-radio v-model="radio" label="3" @click="handleRadioClick">選項3</el-radio> </div> </template> <script> export default { data () { return { radio: '' }; }, methods: { handleRadioClick (val) { console.log('用戶選擇了:', val); } } }; </script>
在上面的示例中,我們創建了三個el-radio單選框,分別對應著不同的選項。這些單選框都綁定了v-model,用來記錄用戶的選擇。同時,我們還給每個單選框綁定了@click事件,用來監聽用戶的點擊行為。當用戶點擊某個單選框時,會觸發相應的@click事件。
在Vue中,事件的處理函數一般是定義在methods中的。所以我們在methods中定義了一個handleRadioClick函數,用來處理單選框的點擊事件。另外,我們還向這個函數傳遞了一個val參數,用來表示用戶選擇的值。
在handleRadioClick函數中,我們通過console.log打印出用戶選擇的值。這樣,我們就可以在控制臺中看到用戶的選擇結果了。