首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue表单输入绑定

Vue表单输入绑定

作者头像
别团等shy哥发育
发布于 2023-02-25 08:02:05
发布于 2023-02-25 08:02:05
8.2K01
代码可运行
举报
运行总次数:1
代码可运行

文章目录

1、简介

  表单控件的数据绑定就是用v-model指令实现的,它会根据控件类型自动选取正确的方法更新元素。由于表单控件有不同的类型,如文本输入框、复选框、单选按钮、选择框等,v-model指令在不同的表单控件上应用时也会有所差异。

2、单行文本输入框

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<input :value="message" @input="message = $event.target.value" />
			<p>message:{{message}}</p>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        	            message: 'Java无难事'
        	        }
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

  在<input>元素中,使用value属性设置了一个“Hello Vue.js”,用v-model指令绑定一个表达式message,对应的数据属性是message。   从上面渲染的结果可看出,文本输入框中显示的是数据属性message的值,而并没有看到<input>元素的value属性的值。这是因为v-model指令会忽略所有表单元素的value、checked、selected属性的初始值,而总是将当前活动实例的数据属性作为数据来源。我们应该总是在JavaScript脚本中声明初始值,或者在组件的data选项中声明初始值。 在文本框中输入数据,可以看到输入框下方的内容也会同时发生改变。

  用户在输入数据的时候,往往会不经意地在示例数据前后输入了空格字符,或者在粘贴数据时不小心带上了制表符,表单的数据通常是要提交到服务端的,因此在提交之前需要编写javaScript代码对数据做一些验证,包括去掉数据前后的空白字符。v-model指令提供了一个trim修饰符,可以帮我们自动过滤输入数据首尾的空白字符,修改上述代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input type="text" v-model.trim="message" value="Hello Vue.js">

除了trim修饰符之外,v-model指令还可以使用下面两个修饰符。

  • .lazy 默认情况下v-model在每次input事件触发后将输入框的值与数据进行同步,如果使用了该修饰符,则会转变为change事件进行同步。
  • .number   如果想自动将用户的输入数据转为数值类型,可以给v-model添加number修饰符。这通常很有用,因为即使在type="number"时,HTML输入元素的值也总是返回字符串。如果这个值无法被parseFloat()解析,则会返回原始值。

3、多行文本输入框

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<textarea v-model="message"></textarea>

4、复选框

  复选框在单独使用和多个复选框一起使用时,v-model绑定的值会有所不同,对于前者,绑定的是布尔值,选中则值为true,未选中则值为false;后者绑定的是同一个数组,选中的复选框的值将被保存到数组中。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<h3>单个复选框:</h3>
			<input id="agreement" type="checkbox" v-model="isAgree">
			<label for="agreement">{{ isAgree }}</label>
			
			<h3>多个复选框:</h3>
			<input id="basketball" type="checkbox" value="篮球" v-model="interests">
		    <label for="basketball">篮球</label>
		    <input id="football" type="checkbox" value="足球" v-model="interests">
		    <label for="football">足球</label>
		    <input id="volleyball" type="checkbox"  value="排球" v-model="interests">
		    <label for="volleyball">排球</label>
		    <input id="swim" type="checkbox"  value="游泳" v-model="interests">
		    <label for="swim">游泳</label>
		  
		    <p>你的兴趣爱好是: {{ interests }}</p>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
    		    data() {
    		        return {
    		            isAgree: false,
    		            interests: []
    		        }
    		    }
		    }).mount('#app');
		</script>
	</body>
</html>

渲染结果:

5、单选按钮

当单选按钮被选中时,v-model指令绑定的数据属性的值会被设置为该单选按钮的value值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<input id="male" type="radio" value="1" v-model="gender">
			<label for="male"></label>
			<br>
			<input id="female" type="radio" value="0" v-model="gender">
			<label for="female"></label>
			<br>
			<span>性别:{{ gender }}</span>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        	            gender: ''
        	        }
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

当选中“男”时,gender的值为1;当选中“女”时,gender的值为0. 对于单选按钮,v-model指令监听的是change事件。

6、选择框

  与复选框类似,因为选择框既可以是单选,也可以是多选(指定<select>元素的multiple属性),因此,v-model在这两种情况下的绑定值会有所不同。单选时,绑定的是选项的值(<option>元素value属性的值);多选时,绑定到一个数组,所有选中的选项的值被保存到数组中。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<h3>单选选择框</h3>
			<select v-model="education">
				<option disabled value="">请选择您的学历</option>
				<option>高中</option>
				<option>本科</option>
				<option>硕士</option>
				<option>博士</option>
			</select>
			<p>您的学历是:{{ education }}</p>
			<h3>多选选择框</h3>
			<select v-model="searches" multiple>
				<option v-for="option in options" :value="option.value">
					{{ option.text }}
				</option>
			</select>
			<p>您选择的搜索引擎是:{{ searches }}</p>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        	            education: '',
        		     	searches: [],
        		     	options: [
        		     		{text: '百度', value: 'baidu.com'},
        		     		{text: '谷歌', value: 'google.com'},
        		     		{text: '必应', value: 'bing.com'}
        		     	]
        	        }
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

  单选选择框v-model绑定的是数据属性education,选中“硕士”时,education的值是字符串“硕士”。多选选择框绑定的是数据属性searches(数组类型),如果同时选中百度、谷歌、必应,值为[“baidu.com”,“google.com”,“bing.com”]。   重复的元素可以使用v-for指令循环渲染,这里的多选选择框的选项元素<option>就是使用v-for渲染的,我们需要做的就是把数据部分抽取出来,组织成一个对象或数组,在组件实例的data选项中定义好。 对于选择框,v-model监听的是change事件。

7、值绑定

  v-model正对不同的表单控件,绑定的值都有默认的约定。例如,单个复选框绑定的是布尔值,多个复选框绑定的是一个数组,选中的复选框value属性的值被保存到数组中。   有时候可能想改变默认的绑定规则,那么可以利用v-bind把值绑定到当前活动实例的一个动态属性上,并且这个属性的值可以不是字符串。

7.1 复选框

  在使用复选框时,在<input>元素上可以使用两个特殊的属性true-value和false-value来指定选中状态下和未选中状态下v-model绑定的值是什么。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
		    
			<input id="agreement" type="checkbox" v-model="isAgree"
			  	true-value="yes"
			  	false-value="no">
			<label for="agreement">{{ isAgree }}</label>
			
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        	            isAgree: false
        	        }
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

  数据属性isAgree的值初始为false,当选中复选框时,其值为true-value属性的值:yes,之后再取消复选框,其值为false-value属性的值:no。   true-value属性和false-value属性也可以使用v-bind,将它们绑定到data选项中的某个数据属性上。代码如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
		    
			<!-- <input id="agreement" type="checkbox" v-model="isAgree"
			  	true-value="yes"
			  	false-value="no"> -->
			
			
			<input id="agreement" type="checkbox" v-model="isAgree"
			  	:true-value="trueVal"
			  	:false-value="falseVal">
			<label for="agreement">{{ isAgree }}</label>
			
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        	            isAgree: false,
        	    	    trueVal: '真',
        	    	    falseVal: '假'
        	        }
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

  数据属性isAgree的值初始为false,当选中复选框时,其值为true-value绑定的数据属性trueVal的值:真,之后再取消复选框,其值为false-value绑定的数据属性falseVal的值:假。如下图

7.2 单选按钮

  单选按钮选中时,v-model绑定的数据属性的值默认被设置为该单选按钮的value值,可以使用v-bind将<inout>云南苏的value属性再绑定到另一个数据属性上,这样选中后的值就是这个value属性绑定的数据属性的值。代码如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<input id="male" type="radio" v-model="gender"
					:value="genderVal[0]">
			<label for="male"></label>
			<br>
			<input id="female" type="radio" v-model="gender"
					:value="genderVal[1]" >
			<label for="female"></label>
			<br>
			<span>性别:{{ gender }}</span>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        	            gender: '',
        		    	genderVal: ['帅哥', '美女']    
        	        }
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

7.3 选择框的选项

  通过选择框选择内容后,其值时选项的值(<option>元素的value属性的值),选项的value属性也可以使用v-bind指令绑定到一个数据属性上。代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<option v-for="option in options" v-bind:value="option.value">

8、实例:用户注册

  在单页应用程序中,用户注册在提交时使用Ajax发送数据到服务端,数据格式采用JSON格式,JSON是JavaScript对象字面量语法的子集,在表单提交前,通常是将要发送的数据先组织为一个javaScript对象或数组,然后转换为JSON字符串进行发送。使用Vue.js,数据组织为对象的过程就变得异常简单了。可以使用v-model指令将输入控件绑定到某个对象的属性上,然后使用v-on指令绑定提交按钮的click事件,在事件处理函数中直接发送该对象即可。完整代码如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户注册</title>
	</head>

	<body>
		<div id = "app">
		<form>
			<table border="0">
				<tr>
					<td>用户名:</td>
					<td>
						<input type="text" name="username" v-model="user.username">
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="password" v-model="user.password">
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="gender" value="1" v-model="user.gender"><input type="radio" name="gender" value="0" v-model="user.gender"></td>
				</tr>
				<tr>
					<td>邮件地址:</td>
					<td>
						<input type="text" name="email" v-model="user.email">
					</td>
				</tr>
				<tr>
					<td>密码问题:</td>
					<td>
						<input type="text" name="pwdQuestion" v-model="user.pwdQuestion">
					</td>
				</tr>
				<tr>
					<td>密码答案:</td>
					<td>
						<input type="text" name="pwdAnswer" v-model="user.pwdAnswer">
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="注册" @click.prevent="register">
					</td>
					<td><input type="reset" value="重填"></td>
				</tr>
			</table>
		</form>
	  </div>
	
        <script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        		        user: {
        		     		username: '',
        		     		password: '',
        		     		gender: '',
        		     		email: '',
        		     		pwdQuestion: '',
        		     		pwdAnswer: ''
        	     	    }
        	        }
        	    },
        	    methods: {
        	    	register: function(){
        	    		//直接发送this.user对象
        	    		//...
        	    		console.log(this.user);
        	    	}
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

  在”提交“按钮上,我们绑定click事件时使用了.prevent修饰符,这是因为本实例是在click事件响应函数中完成的用户注册数据的发送,并不希望表单的默认提交行为发生,因此使用.prevent修饰符来阻止表单的默认提交行为。   输入用户注册信息,然后单击”注册“按钮,在浏览器的Console窗口中将看到以下用户信息。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-07-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Python爬虫+代理IP+Header伪装:高效采集亚马逊数据
在当今大数据时代,电商平台(如亚马逊)的数据采集对于市场分析、竞品监控和价格追踪至关重要。然而,亚马逊具有严格的反爬虫机制,包括IP封禁、Header检测、验证码挑战等。
小白学大数据
2025/05/06
2200
基于Python的携程国际机票价格抓取与分析
携程作为中国领先的在线旅行服务平台,提供了丰富的机票预订服务。其国际机票价格受多种因素影响,包括季节、节假日、航班时刻等。通过抓取携程国际机票价格数据,我们可以进行价格趋势分析、性价比评估以及旅行规划建议等。
小白学大数据
2025/04/29
2372
Python爬虫如何应对贝壳网的IP封禁与人机验证?
在数据采集领域,爬虫工程师常常面临目标网站的反爬机制,如IP封禁、人机验证(如滑块验证、点击验证、短信验证等)。贝壳网作为国内知名的房产交易平台,其反爬策略较为严格,包括但不限于:
小白学大数据
2025/06/08
630
Python爬虫实战:快手数据采集与舆情分析
在短视频时代,快手作为国内领先的短视频平台之一,积累了海量的用户数据、视频内容和互动信息。这些数据对市场分析、用户行为研究、舆情监测等具有重要价值。本文将介绍如何使用Python爬虫技术采集快手数据,并基于NLP(自然语言处理)进行简单的舆情分析。
小白学大数据
2025/06/13
1931
京东反爬策略分析与Python爬虫应对方法
京东的 API 请求中包含大量动态生成的加密参数(如 <font style="color:rgba(0, 0, 0, 0.9);background-color:rgba(0, 0, 0, 0.03);">eid</font>、<font style="color:rgba(0, 0, 0, 0.9);background-color:rgba(0, 0, 0, 0.03);">fp</font>、<font style="color:rgba(0, 0, 0, 0.9);background-color:rgba(0, 0, 0, 0.03);">_t</font> 等),这些参数与用户会话、时间戳和设备信息深度绑定。例如,前端 JavaScript 会生成动态签名(如 <font style="color:rgba(0, 0, 0, 0.9);background-color:rgba(0, 0, 0, 0.03);">sign</font> 参数),同时通过 Canvas、WebGL 等技术采集浏览器指纹,确保请求的合法性和唯一性。
小白学大数据
2025/06/11
1780
Python使用代理IP实时价格监控
最近需要帮朋友写一段关于相关行业产品价格监控的代码,并且要使用代理IP来完成。首先,我得确认朋友的具体需求。他们可能想定期抓取某些电商网站的产品价格,同时避免被目标网站封禁IP,所以需要代理IP的支持。
华科云商小徐
2025/05/06
1350
Python爬虫自动化:批量抓取网页中的A链接
在互联网数据采集领域,爬虫技术发挥着至关重要的作用。无论是搜索引擎的数据索引、竞品分析,还是舆情监控,都需要高效地从网页中提取关键链接。而A标签(**<font style="color:rgb(64, 64, 64);background-color:rgb(236, 236, 236);"><a></font>**)作为HTML中承载超链接的主要元素,是爬虫抓取的重点目标之一。
小白学大数据
2025/05/29
1100
Python爬虫自动化:批量抓取网页中的A链接
自动化爬虫:requests定时爬取前程无忧最新职位
在互联网招聘行业,前程无忧(51job)作为国内领先的招聘平台之一,汇聚了大量企业招聘信息。对于求职者、猎头或数据分析师来说,实时获取最新的招聘信息至关重要。
小白学大数据
2025/05/30
1640
自动化爬虫:requests定时爬取前程无忧最新职位
无头浏览器技术:Python爬虫如何精准模拟搜索点击
无头浏览器是一种没有图形用户界面(GUI)的浏览器,它通过程序控制浏览器内核(如Chromium、Firefox)执行页面加载、JavaScript渲染、表单提交等操作。由于不渲染可视化界面,无头浏览器在服务器环境下运行更高效。
小白学大数据
2025/06/08
1380
Python抓取亚马逊指定商品的所有页面
随着全球疫情逐步缓解,外贸出口市场正在逐步恢复。作为全球最大的电商平台之一,亚马逊的数据反映了外贸出口的趋势和变化。
jackcode
2023/06/01
7620
Python抓取亚马逊指定商品的所有页面
使用Python和BeautifulSoup抓取亚马逊的商品信息
Beautiful Soup 是一个 Python 库,可让您轻松地从 HTML 页面中提取数据。它可以使用各种解析器解析 HTML,例如内置的 Python 解析器、lxml 或 html5lib。 Beautiful Soup 可以帮助您通过标签、属性或文本内容找到特定元素。您还可以使用 .parent、.children 或 .next_sibling 等方法导航 HTML 树结构。 Beautiful Soup 对于网络抓取很有用,因为它可以获取 URL 的内容,然后解析它以提取您需要的信息。例如,您可以使用 Beautiful Soup 从亚马逊网站上抓取商品的标题、价格等信息。
jackcode
2023/05/31
1.8K0
使用Python和BeautifulSoup抓取亚马逊的商品信息
基于Python的携程国际机票价格抓取与分析
携程作为中国领先的在线旅行服务平台,提供了丰富的机票预订服务。其国际机票价格受多种因素影响,包括季节、节假日、航班时刻等。通过抓取携程国际机票价格数据,我们可以进行价格趋势分析、性价比评估以及旅行规划建议等。
小白学大数据
2025/04/28
2090
Python+Selenium爬虫:豆瓣登录反反爬策略解析
在当今互联网时代,数据抓取(爬虫)技术广泛应用于数据分析、市场调研、自动化测试等领域。然而,许多网站采用动态加载技术(如Ajax、React、Vue.js等框架)来渲染页面,传统的**<font style="color:rgb(64, 64, 64);background-color:rgb(236, 236, 236);">requests</font>**库无法直接获取动态生成的内容。这时,Selenium成为解决动态页面爬取的重要工具。
小白学大数据
2025/05/15
1730
Python+Selenium爬虫:豆瓣登录反反爬策略解析
多语言爬虫实现网站价格监控
最近突发奇想想用多种代码来爬取数据做价格监控。常见的比如Python、JavaScript(Node.js)、或者Go?不过通常来说,Python应该是首选,因为它的库比较丰富,比如requests和BeautifulSoup,或者Scrapy。不过客户要求多种代码,所以我应该涵盖至少几种不同的方法。
华科云商小徐
2025/05/08
1530
如何避免爬虫因Cookie过期导致登录失效
Cookie是服务器发送到用户浏览器并保存在本地的一小段数据,用于维持用户会话状态。爬虫在模拟登录后,通常需要携带Cookie访问后续页面。
小白学大数据
2025/04/28
2151
Python爬虫抓取Bilibili弹幕并生成词云
Bilibili(B站)是国内知名的视频分享平台,拥有海量的弹幕数据。弹幕是B站的核心特色之一,用户通过弹幕进行实时互动,这些数据对于分析视频热度、用户情感倾向等具有重要价值。
小白学大数据
2025/05/10
2500
Python爬虫抓取Bilibili弹幕并生成词云
Python爬虫-代理ip爬取电商数据实战
作为一名Python博主,爬虫技能对于获取和分析数据至关重要,经常爬一下,有益身心健康嘛。爬虫技术对很多人来说,不仅仅是一种工具,更像是一种艺术,帮助我们从互联网中,捕捉到有价值的信息。我经常就会用爬虫来爬取一些所需的数据,用来进行数据分析和模型训练。虽然网络上公开的数据很多,但是碍于其时效性和准确性,很难拿来直接用,所以我总是亲自来爬取数据。
是Dream呀
2024/07/24
2340
Python爬虫如何应对贝壳网的IP封禁与人机验证?
在数据采集领域,爬虫工程师常常面临目标网站的反爬机制,如IP封禁、人机验证(如滑块验证、点击验证、短信验证等)。贝壳网作为国内知名的房产交易平台,其反爬策略较为严格,包括但不限于:
小白学大数据
2025/06/04
1940
Python爬虫技巧:使用代理IP和User-Agent应对反爬虫机制
在当今的网络环境中,反爬虫机制广泛应用于各个网站,为爬虫程序增加了困难。然而,作为一名Python爬虫开发者,我们可以利用一些技巧应对这些反爬虫措施。本文将分享一个重要的爬虫技巧:使用代理IP和User-Agent来应对反爬虫机制,帮助您更有效地进行数据爬取。
用户614136809
2023/09/11
8520
Python爬虫HTTP代理使用教程
Python爬虫实战教程里怎么使用HTTP代理。我需要整理一下搜索结果里的信息,然后分步骤说明。
华科云商小徐
2025/04/01
2160
推荐阅读
相关推荐
Python爬虫+代理IP+Header伪装:高效采集亚马逊数据
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验