在Vue中,可以很方便地使用radio控件來實現單選按鈕的功能。radio控件用于從一組選項中選擇一個選項。
使用radio的基本方法是在
<template> <div> <label for="option1"> <input type="radio" id="option1" v-model="selectedValue" value="option1"> Option 1 </label> <label for="option2"> <input type="radio" id="option2" v-model="selectedValue" value="option2"> Option 2 </label> <label for="option3"> <input type="radio" id="option3" v-model="selectedValue" value="option3"> Option 3 </label> <div>Selected value: {{ selectedValue }}</div> </div> </template> <script> export default { data() { return { selectedValue: 'option1' } } } </script>
上面的代碼演示了如何使用radio控件在Vue中實現單選按鈕。使用v-model指令將選中的值綁定到selectedValue變量。在初始狀態下,選中的值是“option1”。
總的來說,Vue中的radio控件非常簡單易用,可以方便地實現單選按鈕的功能。