表单输入绑定

最新推荐文章于 2024-05-29 13:32:54 发布
最新推荐文章于 2024-05-29 13:32:54 发布
阅读量68 收藏
点赞数 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
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue表单输入绑定
m0_51281306的博客
04-12 1351
v-model 指令 • 用于给 <input> 、<textarea> 及 <select> 元素设置双向数据 绑定。 • 首先我们来体验一下双向数据绑定的效果。 输入框绑定 表单数据绑定 输入框绑定 • 输入框分为单行输入框 input 与多行输入框 textarea。 单选按钮绑定 表单数据绑定单选按钮绑定 • 单选按钮的双向数据绑定方式如下 复选框绑定 表单数据绑定复选框绑定 • 复选框...
vue3表单输入绑定
pscool的博客
04-29 2671
注意：v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。vue3可以帮助我们将vue定义的变量绑定到html表单元素上，并且监听到html表单元素修改值时，会将对应的vue定义的变量修改。v-model 还可以用于各种不同类型的输入。注意：要加上下面的样式，才有换行效果哦。多个复选框绑定的是同一个数组或集合的值。单个的复选框，绑定的是布尔类型值。
Vue——表单输入绑定
hulin的博客
04-09 930
Vue的表单输入绑定
08 vue学习：表单输入绑定
热门推荐
百锦再的博客
05-17 8万+
元素会渲染成一个“未选择”的状态。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。attribute，因为浏览器在表单提交时，并不会包含未选择的复选框。为了保证这两个值 (例如：“yes”和“no”) 的其中之一被表单提交，请使用单选按钮作为替代。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。幸运的是，我们可以使用 Vue 构建具有自定义行为的可复用输入组件，并且这些输入组件也支持。在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。
vue3 表单输入绑定
JiuMeilove的博客
05-29 1018
在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。另外，v-model 还可以用于各种不同类型的输入，、 元素。
Vue--表单输入绑定
qq_45954420的博客
03-08 1757
一、基础用法 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 1.注意 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 v-model 在内部为不同的输入元素使用不同
Vue - 表单输入绑定详解
学无止境
12-30 1223
在Web开发中，表单是用户与应用程序交互的重要方式之一。Vue.js 提供了强大的表单输入绑定机制，使得在处理用户输入时变得更加简洁和高效。本篇博客将深入探讨 Vue.js 中表单输入绑定的各种用法，包括文本输入、多行文本、复选框、单选按钮、下拉选择框、多选框，以及修饰符的使用。
Vue表单输入绑定
十三阿哥的博客
05-30 1155
vue表单输入绑定
Vue学习--表单输入绑定
MrWangisgoodboy的博客
07-04 387
Vue学习--表单输入绑定
Vue表单输入绑定的示例代码
10-17
主要介绍了Vue表单输入绑定的示例代码，本文使用v-model指令在表单input创建双向数据绑定，非常具有实用价值，需要的朋友可以参考下
Python全栈（六）项目前导之8.Vue事件绑定、计算属性、表单输入绑定和自定义组件
01-08
监听属性watch三、表单输入绑定1.input标签输入绑定2.修饰符.lazy.number.trim四、自定义组件的基本使用 一、事件绑定 1.HTML元素事件绑定 事件绑定就是在HTML元素中，通过v-on或者 @ 绑定事件。 事件代码可以直接放...
Vue学习笔记之表单输入控件绑定
12-11
总的来说，Vue的表单输入绑定使得开发者能够轻松地处理用户输入数据，并保持数据模型和视图的一致性。通过各种修饰符，你可以根据需求调整数据同步的时机和方式，增强表单交互体验。学习和掌握这些基础用法对于开发...
Owl 学习笔记之六--表单输入绑定 我们经常需要能够从 html input（或 textarea, or select）中
05-07
在Owl框架中，表单输入绑定是一个非常关键的功能，它允许我们轻松地从HTML的input、textarea或select元素中获取和同步数据到组件的状态。本文档将深入探讨Owl的t-model指令及其用法。 首先，让我们回顾一下手动处理...
这演示的叫啥数学模型来着，似曾很熟
最新发布
07-25
这演示的叫啥数学模型来着，似曾很熟
b131学生成绩分析和弱项辅助系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-25
学生成绩分析和弱项辅助系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现学生成绩分析和弱项辅助系统的功能。其中管理员管理用户，新闻公告。 学生成绩分析和弱项辅助系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，学生成绩分析和弱项辅助系统都可以轻松应对。 学生信息管理页面，此页面提供给管理员的功能有：学生信息的查询管理，可以删除学生信息、修改学生信息、新增学生信息，还进行了对用户名称的模糊查询的条件。教师信息管理页面，此页面提供给管理员的功能有：查看已发布的教师信息数据，修改教师信息，教师信息作废，即可删除，还进行了对教师信息名称的模糊查询 教师信息信息的类型查询等等一些条件。试卷信息管理页面，此页面提供给管理员的功能有：根据试卷信息进行条件查询，还可以对试卷信息进行新增、修改、查询操作等等。公告信息管理页面，此页面提供给管理员的功能有：根据公告信息进行新增、修改、查询操作等等。
vue2之jessibuca视频插件使用教程之字体文件
07-25
vue2之jessibuca视频插件使用教程之字体文件
b126小型医院医疗设备管理系统-springboot+vue.zip（可运行源码+sql文件+文档）
07-25
小型医院医疗设备管理系统在Eclipse环境中，使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务 总之，小型医院医疗设备管理系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。 职员信息管理页面，此页面提供给管理员的功能有：职员信息的查询管理，可以删除职员信息、修改职员信息、新增职员信息，还进行了对用户名称的模糊查询的条件。设备信息管理页面，此页面提供给管理员的功能有：查看已发布的设备信息数据，修改设备信息，设备信息作废，即可删除，还进行了对设备信息名称的模糊查询 设备信息信息的类型查询等等一些条件。库房信息管理页面，此页面提供给管理员的功能有：根据库房信息进行条件查询，还可以对库房信息进行新增、修改、查询操作等等。公告信息管理页面，此页面提供给管理员的功能有：根据公告信息进行新增、修改、查询操作等等。
Matlab实现布谷鸟优化算法CS-TCN-Multihead-Attention多输入单输出回归预测算法研究.rar
07-25
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
layui表单绑定按钮
03-28
要绑定按钮，您需要使用`layui.form.on()`方法，该方法允许您在表单数据发生更改时执行回调函数。以下是一个基本示例： ```html <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="submitBtn">提交</button> </div> </div> </form> <script> // 监听表单提交按钮 layui.form.on('submit(submitBtn)', function(data){ // 在这里编写表单提交的处理逻辑 console.log(data.field); // 输出表单数据 return false; // 阻止表单跳转 }); </script> ``` 在上面的示例中，我们使用了`lay-filter`属性来标识需要绑定的按钮。然后，我们使用`layui.form.on()`方法来监听该按钮的点击事件，并在表单数据发生更改时执行回调函数。在回调函数中，我们可以访问表单数据，然后使用它来执行任何必要的操作。最后，我们使用`return false`语句来阻止表单跳转。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

东海029

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

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

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

打赏作者

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

抵扣说明：

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

余额充值