在Vue中,可以使用v-model
指令来创建数据和视图之间的双向绑定,这对于表单控件如单选按钮(radio buttons)尤其有用。v-model
确保了视图中的单选按钮的状态能够反映数据模型中的值,同时数据模型的值也会随着用户的选择而更新。
以下是如何在Vue中绑定单选按钮的示例:
<template>
<div>
<input type="radio" id="option1" value="Option1" v-model="picked">
<label for="option1">Option 1</label>
<input type="radio" id="option2" value="Option2" v-model="picked">
<label for="option2">Option 2</label>
<input type="radio" id="option3" value="Option3" v-model="picked">
<label for="option3">Option 3</label>
<p>选中的是: {{ picked }}</p>
</div>
</template>
<script>
export default {
data() {
return {
picked: ''
};
}
}
</script>
在这个例子中,所有的单选按钮都绑定到了同一个数据属性picked
。这意味着,当用户选择任何一个选项时,picked
的值都会更新为该选项的value
。同时,因为所有单选按钮都绑定到了同一个数据属性,所以这些按钮之间是互斥的,即一次只能选择一个选项。
请注意,v-model
会忽略任何表单元素上初始的value
、checked
或selected
属性。它将始终将当前绑定的JavaScript状态视为数据的正确来源。因此,你应该在JavaScript中使用Vue的响应式系统的API来声明该初始值。