Radio是一種常見的表單元素,在表單中通常用來讓用戶選擇單項的選項。Vue是一種流行的漸進式JavaScript框架,可以方便地管理和渲染表單元素。在Vue中,有一個專門的組件來處理Radio選項,讓我們更方便地在表單中使用。
下面是一個簡單的Vue Radio示例:
<template> <div> <div v-for="option in options" :key="option.id"> <input type="radio" v-model="selected" :value="option.id">{{ option.label }} </div> <p>Selected Option: {{ selected }}</p> </div> </template> <script> export default { data() { return { options: [ { id: 1, label: 'Option 1' }, { id: 2, label: 'Option 2' }, { id: 3, label: 'Option 3' } ], selected: null }; } } </script>
在這個示例中,我們首先定義了一個包含三個選項的數組。然后,我們使用v-for指令在HTML中創建了一組Radio選項。我們使用v-model指令將選項的值綁定到selected屬性上。
最后,我們輸出了當前所選選項的值(即selected屬性的值)。
使用Vue Radio組件,我們可以更方便地處理表單中的Radio選項。它可以自動將選項綁定到數據模型中,并處理任何用戶輸入錯誤。