阅读量:6
在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>
- 在data中定义一个
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
方法会被调用,并打印选中的值。