在Vue中,可以通過v-model
指令和@change
事件來實現radio選中事件的監聽和處理。具體步驟如下:
v-model
指令來綁定radio的值到一個data屬性,例如:<input type="radio" id="option1" value="option1" v-model="selectedOption">
<label for="option1">Option 1</label>
<input type="radio" id="option2" value="option2" v-model="selectedOption">
<label for="option2">Option 2</label>
selectedOption
屬性來保存選中的radio值:data() {
return {
selectedOption: ''
};
}
@change
事件監聽radio選中事件,并在方法中處理選中事件:<input type="radio" id="option1" value="option1" v-model="selectedOption" @change="handleOptionChange">
<label for="option1">Option 1</label>
<input type="radio" id="option2" value="option2" v-model="selectedOption" @change="handleOptionChange">
<label for="option2">Option 2</label>
methods: {
handleOptionChange() {
console.log('Selected option is: ' + this.selectedOption);
}
}
這樣就可以在Vue中監聽和處理radio選中事件了。當用戶選擇不同的radio選項時,handleOptionChange
方法會被調用,并打印選中的值。