常见表单元素都可以用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>