表单输入绑定

最新推荐文章于 2024-05-29 13:32:54 发布
最新推荐文章于 2024-05-29 13:32:54 发布
阅读量90 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongzh029/article/details/119559626
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单输入绑定</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id = 'example-input'>
			<p>文本:{{input_text}}</p>
			<input v-model="input_text" />
		</div>
		<div id = 'example-textarea'>
			<p>多行文本:{{input_textarea}}</p>
			<textarea v-model="input_textarea"></textarea>
		</div>
		<div id = 'example-checkbox1'>
			<span>单个复选框，绑定到布尔值:{{checked}}</span>
			<input type="checkbox" id = 'checkbox'  v-model='checked' />
			<label for="checkbox">{{checked}}</label>
		</div>
		<br />
		<div id = 'example-checkbox2'>
			<span>多个复选框，绑定到数组:{{checkedNames}}</span>
			<input type="checkbox" id = 'jack' value='jack' v-model='checkedNames' />
			<label for="jack">jack</label>
			<input type="checkbox" id = 'John' value='John' v-model='checkedNames' />
			<label for="John">John</label>
			<input type="checkbox" id = 'Mike' value='Mike' v-model='checkedNames' />
			<label for="Mike">Mike</label>
		</div>
		<br />
		<div id = 'example-radio'>
			<span>单选按钮:</span><br />
			<input type="radio" value="全红婵" id='quan' v-model="getName"/>
			<label for="quan">全红婵</label>
			<br />
			<input type="radio" value="苏炳添" id='su' v-model="getName"/>
			<label for="su">苏炳添</label>
			<br />
			<span>2020东京奥运会谁最出彩：{{getName}}</span>
		</div>
		<br />
		<div id = 'selected-option'>
			<span>下拉选择框：</span><br />
			<select v-model="selectedName">
				<option disabled value="">请选择乒乓大神</option>
				<option>张继科</option>
				<option>孙颖莎</option>
				<option>马龙</option>
				<option>张怡宁</option>
				<option>陈梦</option>
			</select><br />
			<span>你的选择是:{{selectedName}}</span>
		</div>
		<br />
		<div id = 'selected-option-multiple'>
			<span>多选下拉框，内容动态渲染:</span><br />
			<select multiple v-model="selectmultiple" >
				<option v-for="option in options"  v-bind:value="option.value">
				{{option.text}}
				</option>
			</select><br />
			<span>选择是：{{selectmultiple}}</span>
		</div>
	</body>
	<script>
		var exampleInput = new Vue({
			el:"#example-input",
			data:{
				input_text:''
			}
			
		})
		var exampleTextarea = new Vue({
			el:'#example-textarea',
			data:{
				input_textarea:''
			}
		})
		var exampleCheckbox1 = new Vue({
			el:'#example-checkbox1',
			data:{
				checked :'false'
			}
		
		})
		var exampleCheckbox2 = new Vue({
			el:'#example-checkbox2',
			data:{
				checkedNames :[]
			}

		})
		var exampleRadio = new Vue({
			el:'#example-radio',
			data:{
				getName:''
			}
		})
		var selectedOption = new Vue({
			el:'#selected-option',
			data:{
				selectedName:''
			}
		})
		var selectedOptionMultiple = new Vue({
			el:'#selected-option-multiple',
			data:{
				selectmultiple:[],
				options:[
					{text:'石智勇',value:'shizhiyong'},
					{text:'李发彬',value:'lifabin'},
					{text:'汪周雨',value:'wangzhouyu'}
				]
			}
		})
	</script>
</html>
东海029
关注
专栏目录
vue表单输入绑定
m0_51281306的博客
04-12 1379
v-model 指令 • 用于给 <input> 、<textarea> 及 <select> 元素设置双向数据 绑定。 • 首先我们来体验一下双向数据绑定的效果。 输入框绑定 表单数据绑定 输入框绑定 • 输入框分为单行输入框 input 与多行输入框 textarea。 单选按钮绑定 表单数据绑定单选按钮绑定 • 单选按钮的双向数据绑定方式如下 复选框绑定 表单数据绑定复选框绑定 • 复选框...
Vue：表单输入绑定
ChinaDragon10的博客
06-03 1158
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件： text 和 textarea 元素使用 value property 和 input 事件； checkbox 和 radio 使用 checked property 和 change 事件； select 字段将 value 作为 prop 并将 change 作为事件。
vue3表单输入绑定
pscool的博客
04-29 2752
注意：v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。vue3可以帮助我们将vue定义的变量绑定到html表单元素上，并且监听到html表单元素修改值时，会将对应的vue定义的变量修改。v-model 还可以用于各种不同类型的输入。注意：要加上下面的样式，才有换行效果哦。多个复选框绑定的是同一个数组或集合的值。单个的复选框，绑定的是布尔类型值。
vue3-表单输入绑定
wdk996的博客
01-18 770
v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。v-model 还可以用于各种不同类型的输入元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合。
Vue——表单输入绑定
hulin的博客
04-09 1200
Vue的表单输入绑定
九、表单输入绑定
走在bug的路上
09-29 2053
● 单行文本输入框 ● 多行文本输入框 ● 复选框 ● 单选按钮 ● 选择框 ● 值绑定 ○ 复选框 ○ 单选按钮 ○ 选择框的选项 ● 实例：用户注册
vue3 表单输入绑定
JiuMeilove的博客
05-29 1330
在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。另外，v-model 还可以用于各种不同类型的输入，、 元素。
08 vue学习：表单输入绑定
热门推荐
百锦再的博客
05-17 9万+
元素会渲染成一个“未选择”的状态。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。attribute，因为浏览器在表单提交时，并不会包含未选择的复选框。为了保证这两个值 (例如：“yes”和“no”) 的其中之一被表单提交，请使用单选按钮作为替代。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。幸运的是，我们可以使用 Vue 构建具有自定义行为的可复用输入组件，并且这些输入组件也支持。在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。
Vue--表单输入绑定
qq_45954420的博客
03-08 1785
一、基础用法 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 1.注意 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 v-model 在内部为不同的输入元素使用不同
Vue表单输入绑定的示例代码
10-17
在Vue中，`v-model` 是实现表单输入和应用状态之间双向绑定的指令。它在内部为不同的输入元素使用不同的属性并抛出不同的事件： 1. 对于文本和多行文本框，`v-model` 使用 `value` 属性和 `input` 事件。 2. 对于复...
Owl 学习笔记之六--表单输入绑定 我们经常需要能够从 html input（或 textarea, or select）中
05-07
在Owl框架中，表单输入绑定是一个非常关键的功能，它允许我们轻松地从HTML的input、textarea或select元素中获取和同步数据到组件的状态。本文档将深入探讨Owl的t-model指令及其用法。 首先，让我们回顾一下手动处理...
Vue.js教程视频（12）.第11节 表单输入绑定.mp4
06-19
Vue.js教程视频系列，共16个视频，内容如下： 01.序言 vue.js介绍 02.第1节 安装与部署 03.第2节 创建第一个vue应用 ...12.第11节 表单输入绑定 13.第12节 组件基础 14.第13节 组件注册 15.第14节 单文件组件
Vue之表单输入绑定
空夜's Blog
10-30 2472
Example 在HTML中，表单是很常见的。对于Vue来说，使用v-bind并不能解决表单域对象双向绑定的需求——所谓双向绑定，就是无论是通过input还是通过vue对象，都能修改绑定的数据对象的值。 Vue提供了v-model进行双向绑定。例如绑定单个文本框： input: &amp;lt;input type=&quot;text&quot; v-model=&quot;name&quot;&amp;gt; value: &amp;lt;span
v-model 表单输入绑定
m0_66827203的博客
06-30 161
笔记
动态加载概述与原理.docx
最新发布
11-07
动态加载概述与原理.docx
LOL_params_0900000.pt
11-07
LOL_params_0900000.pt
分群用户详情_7_2024-09-06 09_49_58.xlsx
11-07
分群用户详情_7_2024-09-06 09_49_58
Vue.js表单输入绑定详解
"本文主要介绍了Vue.js中的表单输入绑定，包括单行文本框、多行文本框、复选框、单选框和下拉框的v-model指令使用方法，并提供了一个聊天对话框的课堂实例。同时，文章还提到了Vue.js的基本概念，如创建Vue实例，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东海029

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值