vue3中v-model的使用

<script setup>
import { reactive } from "vue";

const data = reactive({
  text: "我是文本内容", //文本框

  radio: "", //单选框

  checkbox: [], //复选框

  remember: false, //记住密码

  select: "", //下拉框
});
</script>

<template>
  <div>
    <h3>文本框：{{ data.text }}</h3>
    <br />
    <h3>单选框：{{ data.radio }}</h3>
    <br />
    <h3>复选框：{{ data.checkbox }}</h3>
    <br />
    <h3>记住密码：{{ data.remember }}</h3>
    <br />
    <h3>下拉框：{{ data.select }}</h3>
    <br />
    <br />
    <br />
    双向数据绑定：<input v-model="data.text" type="text" />
    <hr />
    <br />

    <input v-model="data.radio" type="radio" value="1" />篮球
    <input v-model="data.radio" type="radio" value="2" />足球
    <hr />
    <br />

    <input v-model="data.checkbox" type="checkbox" value="西瓜" />西瓜

    <input v-model="data.checkbox" type="checkbox" value="葡萄" />葡萄

    <input v-model="data.checkbox" type="checkbox" value="西红柿" />西红柿
    <hr />
    <br />
    <input v-model="data.remember" type="checkbox" />记住密码 <br /><br />
    <hr />
    <br />

    <label for="pet-select">Choose a pet:</label>

    <select name="pets" id="pet-select" v-model="data.select">
      <option value="">--Please choose an option--</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
    </select>
  </div>
</template>