Vue利用v-model获取不同类型表单数据的方式_input v-model获取输入值

<!-- username存储的是输入框中的字符串 -->
<input type="text" v-model="username">
1
2

<!-- sex属性存储的是被选中单选框的value值 -->
<input type="radio" name="gender" value="man" v-model="sex">男
<input type="radio" name="gender" value="woman" v-model="sex">女
1
2
3

<!-- isAgree属性存储的是该复选框的选中情况 -->
<input type="checkbox" v-model="isAgree">是否同意
1
2

<!-- hobby属性存储的是所有被选中复选框value的集合，比如：['study', 'game'] -->
<!-- 如果hobby初始值是字符串，则hobby收集到的是boolean类型的值 -->
<input type="checkbox" value="study" v-model="hobby">学习
<input type="checkbox" value="eat" v-model="hobby">吃饭
<input type="checkbox" value="game" v-model="hobby">打游戏
1
2
3
4
5

<!-- city属性存储的是被选中项的value -->
<select v-model="city">
	<option value="tianjin">天津</option>
	<option value="beijing">北京</option>
	<option value="shanghai">上海</option>
</select>
1
2
3
4
5
6

<textarea v-model="comment"></textarea>
1