在Vue3.0中，事件处理用v-on指令，表单输入绑定则用v-model指令。v-model指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
9.1 文本输入
在HTML标签中，文本输入有单行(text)和多行(textarea)输入。温馨提醒:v-model 会忽略所有表单元素的value的初始值而总是将当前活动实例的数据作为数据来源。你应该通过 JavaScript 该组件的 data 选项中声明初始值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0表单绑定</title>
<script src="vue.global.js"></script>
</head>
<body>
<div id="app">
<input v-model="msg" placeholder="单行输入"/>
<p>单行输入结果: {{ msg }}</p>
<hr style="background-color: #4CAF50;height: 1px"/>
<textarea v-model="msg2" placeholder="多行输入"></textarea>
<p>多行输入结果: {{ msg2 }}</p>
</div>
<script>
Vue.createApp({
data() {
return {
msg: '',
msg2: ''
}
}
}).mount("#app")
</script>
</body>
</html>输出结果
9.2 单选和多选
在开发产品时，单选按钮，用于多选一，在选择性别时常见；单个复选框常在勾选协议中见到；在多个已知选项中，多选一时，可用select。
多个复选框，常在选择个人兴趣爱好等见到。复选框，单选时，绑定到布尔值，多选时，绑定到同一个数组。如果要选择项很多，那可用多选下拉菜单，以节约布局空间。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0表单绑定</title>
<script src="vue.global.js"></script>
</head>
<body>
<div id="app">
快来，选择你喜欢的编程语言
<div>
<input type="checkbox" id="Python" value="Python" v-model="likes"/>
<label for="Python">Python</label>
<input type="checkbox" id="Java" value="Java" v-model="likes"/>
<label for="Java">John</label>
<input type="checkbox" id="web" value="前端" v-model="likes"/>
<label for="web">前端</label>
<br/>
<span>你选择的语言: {{ likes.length > 0 ? likes : '' }}</span>
</div>
<div>
<input type="radio" id="boy" value="程序猿" v-model="gender"/>
<label for="boy">程序猿</label>
<br/>
<input type="radio" id="girl" value="程序媛" v-model="gender"/>
<label for="girl">程序媛</label>
<br/>
<input type="radio" id="no" value="不男不女" v-model="gender"/>
<label for="no">不男不女</label>
<br/>
<span>你是: {{ gender }}</span>
</div>
<div>
<select v-model="selected">
<option disabled value="">你爱帅哥还是美女</option>
<option>帅哥</option>
<option>美女</option>
</select>
<br/>
<span>你爱: {{ selected }}</span>
</div>
<div> 你确定就勾选：<input type="checkbox" id="checkbox" v-model="agree"/>
</div>
<br/>
<div>
<button @keyup.enter="submit" type="submit" @click="submit">
提交</button>
</div>
</div>
<script>
Vue.createApp({
data() {
return {
likes: [],
gender: '',
selected: '',
agree: false
}
},
methods: {
submit() {
if (this.likes.length == 0) {
alert('你没有选择喜欢的编程语言.')
} else if (this.gender == '') {
alert('性别选择一下，又会怎么样呢?')
} else if (this.selected == '') {
alert('没有选择你所爱的.')
} else if (this.agree == false) {
alert('勾选协议，才可以提交.')
} else {
alert('恭喜你，数据提交成功!')
}
}
}
}).mount("#app")
</script>
</body>
</html>输出结果
好了，有关Vue3.0表单输入的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。我在分享Python，前端、Java和App方面的干货。关注我，没错的。
本文暂时没有评论，来添加一个吧(●'◡'●)