详解Vue中表单组件的双向数据绑定

<template>
  <div>
    <input type="text" v-model="message">
    <p>输入的内容是：{{ message }}</p>
  </div>
</template>

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

<template>
  <div>
    <input type="radio" value="male" v-model="gender"> 男
    <input type="radio" value="female" v-model="gender"> 女
    <p>选中的性别是：{{ gender }}</p>
  </div>
</template>

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

<template>
  <div>
    <textarea v-model="message"></textarea>
    <p>输入的内容是：{{ message }}</p>
  </div>
</template>

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

<template>
  <div>
    <input type="checkbox" id="option1" value="option1" v-model="selectedOptions">
    <label for="option1">选项一</label><br>
    <input type="checkbox" id="option2" value="option2" v-model="selectedOptions">
    <label for="option2">选项二</label><br>
    <input type="checkbox" id="option3" value="option3" v-model="selectedOptions">
    <label for="option3">选项三</label><br>
    <p>选中的选项是：{{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: []
    };
  }
};
</script>

<template>
  <div>
    <select v-model="selectedOption">
      <option value="option1">选项一</option>
      <option value="option2">选项二</option>
      <option value="option3">选项三</option>
    </select>
    <p>选中的选项是：{{ selectedOption }}</p>
  </div>
</template>

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