v-model应用于其他表单元素

常见表单元素都可以用v-model绑定关联，快速获取或者设置表单元素的值

根据控件类型自动选择正确方法来更新元素

输入框 input：text      ——>value
文本域 textarea          ——>value
复选框 input:checked  ——>checked
单选框 input :radio      ——>checked
下拉菜单 select          ——>value

相亲介绍案例 

<template>
<div>
  <h3>相亲网</h3>

  姓名：
  <input type="text" v-model="username"><br>

  是否单身：
  <input type="checkbox" v-model="isSingle"><br>

  性别：
  <input v-model="gender" type="radio" name="gender" value="1">男 <!--value属性用于提交给后台的数据-->
  <input v-model="gender" type="radio" name="gender" value="2">女<br>

<!-- 1.option需要设置value值。提交给后台
     2.select的value值，关联了选中的option的value值
-->
  所在城市:
  <select v-model="cityId">
    <option value="101">北京</option> <!--真正用于提交的是value的值-->
    <option value="102">广东</option>
    <option value="103">上海</option>
    <option value="104">浙江</option>
  </select>

  自我介绍：
  <textarea v-model="desc"></textarea>

  <button>登录</button>
</div>


</template>

<script setup>
import {ref} from 'vue'
const username = ref('')
const isSingle =ref(true)
const gender = ref('')
const cityId =ref('')
const resc = ref('')

</script>