整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
Vue3.0中，事件处理用v-on指令，表单输入绑定则用v-model指令。v-model指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
在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>输出结果
在开发产品时，单选按钮，用于多选一，在选择性别时常见；单个复选框常在勾选协议中见到；在多个已知选项中，多选一时，可用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方面的干货。关注我，没错的。
#前端##Vue.js##JavaScript##程序员##Web#
、封装获取元素的方法
封装思想——函数封装——代码复用
function get_id(id){
// 这个函数是专门来通过id获取元素
return document.getElementById(id)
}
function get_els(parentId, tagName){
// 这个函数是专门来获取某个父标签范围内的某些标签
return get_id(parentId).getElementsByTagName(tagName)
}二、表单元素属性
常用的表单元素包括 input、select、textarea、button等，下面我们学习这些表单元素中常用的属性。
需求：点击按钮修改input的类型和内容
html和css代码
<input type="button" value="按钮" id="btn">JavaScript代码
单标签
网页（程序）如果要和用户产生互动，则必须借助一定的中介，这个中介一般是：文本输入框、按钮、多选框、单选框。而表单则是这些中介和放置这些中介的空间（<form action=”” methon=””></form>）。
在网页中，这些文本输入框、按钮等等必须放置在由<form></form>这个标签所定义的空间中，否则没有实际意义。所以，由<form></form>标签所定义的空间就是表单存在的空间。
【各种输入类型】
呈现结果
姓名：
原始码
<form action=http://www.baidu.com/nameproject.aspmethon=”post”>
姓名：<input type="text" name="name" size="20">
</form>
它有下列可设定之属性：
呈现结果
性别：男 女
原始码
<form>
性别：
男 <input type="radio" name="sex" value="boy">
女 <input type="radio" name="sex" value="girl">
</form>
它有下列可设定之属性：
呈现结果
喜好： 电影 看书
原始码
<form>
喜好：
<input type="checkbox" name="sex" value="movie">电影
<input type="checkbox" name="sex" value="book">看书
</form>
它有下列可设定之属性：
呈现结果
请输入密码：
原始码
<form>
请输入密码：<input type="password" name="input">
</form>
它有下列可设定之属性：
呈现结果
原始码
<form>
<input type="submit" value="送出资料">
<input type="reset" value="重新填写">
</form>
它有下列可设定之属性：
呈现结果
请按下按钮：
原始码
<form>
请按下按钮：<input type="button" name="ok" value="我同意">
</form>
它有下列可设定之属性：
呈现结果
隐藏栏位：
原始码
<form>
隐藏栏位：<input type="hidden" name="nosee" value="看不到">
</form>
它有下列可设定之属性：
【大量文字输入元件】
呈现结果
请输入您的意见：
原始码
<form>
请输入您的意见：<br>
<textarea name="talk" cols="20" rows="3"></textarea>
</form>
它有下列可设定之属性：
【下拉式选单】
呈现结果
您喜欢看书吗？：
非常喜欢
还算喜欢
不太喜欢
非常讨厌
原始码
<form>
您喜欢看书吗？：
<select name="like">
<option value="非常喜欢">非常喜欢
<option value="还算喜欢">还算喜欢
<option value="不太喜欢">不太喜欢
<option value="非常讨厌">非常讨厌
</select>
</form>
它有下列可设定之属性：
multiple，是设定此一栏位为复选，可以一次选好几个选项。
....................................................................
我的微信公众号：UI严选 —越努力，越幸运
*请认真填写需求信息，我们会在24小时内与您取得联系。
