在vue 怎么绑定radio

vue yekong

在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会忽略任何表单元素上初始的valuecheckedselected属性。它将始终将当前绑定的JavaScript状态视为数据的正确来源。因此,你应该在JavaScript中使用Vue的响应式系统的API来声明该初始值。

喜欢