在Vue的开发中,我们常常要处理与用户的输入相关的问题,其中包括单选框。Vue为我们提供了一种方便的使用单选框的方式——input vue radio。
<template>
<div>
<label><input type="radio" v-model="picked" value="a"> A</label>
<label><input type="radio" v-model="picked" value="b"> B</label>
<p>Selected: {{ picked }}</p>
</div>
</template>
<script>
export default {
data() {
return {
picked: 'a'
}
}
}
</script>
如上所示,v-model指令用于绑定单选框的值,而value属性则用于指定选项的值。我们还可以在页面上显示当前选中的选项的值,方便用户确认选择是否正确。
当然,input vue radio并不仅仅可以用于绑定简单值,还可以使用对象或数组。
<template>
<div>
<label><input type="radio" v-model="picked" :value="obj"> Object</label>
<label><input type="radio" v-model="picked" :value="arr"> Array</label>
<p>Selected: {{ picked }}</p>
</div>
</template>
<script>
export default {
data() {
return {
picked: null,
obj: {
message: 'Hello'
},
arr: ['1', 2, true]
}
}
}
</script>
上述代码中,我们使用对象和数组来作为每个选项的值。在选中其中一个选项时,picked的值会分别变为相应的对象和数组。这种方式可以帮助我们更方便地处理复杂的用户输入。
最后,我们可以使用一个单独的数组来渲染一组单选框,这常常用于动态生成选项的场景。
<template>
<div>
<label v-for="option in options" :key="option">
<input type="radio" v-model="picked" :value="option"> {{ option }}
</label>
<p>Selected: {{ picked }}</p>
</div>
</template>
<script>
export default {
data() {
return {
picked: null,
options: ['A', 'B', 'C']
}
}
}
</script>
上述代码中,我们使用v-for指令来循环渲染一个单选框组,并动态绑定选项的值。这种方式极大地方便了我们生成和管理大量选项。