Vue.js 表单输入绑定与单选选项

什么是Vue.js表单输入绑定?

在Vue.js中，可以使用v-model指令将表单控件和Vue实例中的数据进行绑定，从而实现输入值的同步更新。

<input v-model="message">
<p>{{ message }}</p>

在上面的例子中，v-model绑定了一个变量message，所以当输入框中的值发生变化时，message也会被更新。同时，如果message的值发生改变，输入框中的内容也会被同步更新。

单选选项

单选选项是一组互斥的选项，用户只能选择其中的一个。在Vue.js中，可以通过v-model和radio来实现单选选项的功能。

简单例子

<template>
  <div>
    <label>
      <input type="radio" v-model="picked" value="One">
      One
    </label>
    <label>
      <input type="radio" v-model="picked" value="Two">
      Two
    </label>
    <p>Picked: {{ picked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      picked: ''
    }
  }
}
</script>

在上面的例子中，v-model指令绑定了一个变量picked，而每个单选输入框的value属性则分别设定为"One"和"Two"。

v-bind和v-for

通常情况下，单选选项都是由一个数组中的元素生成的。在这种情况下，可以使用v-for指令来遍历数组，使用v-bind指令绑定选项的value值。

<template>
  <div>
    <label v-for="(option, index) in options" :key="index">
      <input type="radio" v-model="picked" :value="option.value">
      {{ option.text }}
    </label>
    <p>Picked: {{ picked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      picked: '',
      options: [
        { text: 'Option 1', value: 'One' },
        { text: 'Option 2', value: 'Two' },
        { text: 'Option 3', value: 'Three' }
      ]
    }
  }
}
</script>

在上面的例子中，使用v-for遍历了一个数组options，并绑定了每个单选输入框的value属性。同时，当用户选择了一个单选选项时，对应的选项value值会保存在picked变量中。

总结

• v-model指令可以将表单控件和Vue实例中的数据进行双向绑定。
• 单选选项可以使用v-model和radio实现。
• 使用v-for指令和v-bind指令，可以方便地生成单选选项。