VUE之表单与v-model

最新推荐文章于 2023-12-19 21:39:56 发布
最新推荐文章于 2023-12-19 21:39:56 发布
阅读量198 收藏
点赞数
文章标签： VUE之表单与v-model
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45626166/article/details/102572668
版权
本文详细介绍了Vue中v-model的使用，包括其在表单控件如单选、多选、输入框中的基本用法，注意事项，以及在单选框/按钮、复选框/多选按钮和下拉选择列表中的应用。还提到了v-model的修饰符如.lazy、.number和.trim，帮助理解如何实现数据的双向绑定和特定场景的处理。
摘要由CSDN通过智能技术生成

v-model基本用法

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。 Vue 提供了 v-model 指令，用于在表单类元素上双向绑定数据。
例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。

<div id="List-area">
			姓名:<input :type="inputType" :placeholder="placeInfo" v-model="userName" />
			<h2>您好:{{userName}}</h2>
		</div>
	<script type="text/javascript">
		var List-area = new Vue({
			el:"#List-area",
			data:{
				inputType:'text',
				placeInfo:'请输入您的姓名',
				userName:''
			}
		})
	</script>

在这里插入图片描述
在输入框输入的同时，｛ { message } ｝也会实时将内容渲染在视图中。
对于文本域 textarea 也是同样的用法

<div id="List-area">
			评价:<textarea :placeholder="placeInfo" v-model="assess"></textarea>
			<h2>评语:{{assess}}</h2>
		</div>
	<script type="text/javascript">
		var List-area = new Vue({
			el:"#List-area",
			data:{
				placeInfo:'请输入您的评价',
				assess:''
			}
		})
	</script>

在这里插入图片描述

注意事项

注意：
①使用 v-model 后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的 value属性（解耦初始化value属性）

<input
			 :type="inputType"
			 :placeholder="placeInfo"
			 value="我是初始默认值"
			 v-model="userName"
			 />

②对于< textarea> 之间插入的值，不会生效（覆盖文本域）

<div id="app">
				<textarea v-model="Introduce">我是...</textarea>
			</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				Introduce:'大家好'
			}
		})
	</script>

在这里插入图片描述
注意：
③使用 v-model 时，如果是用中文输入法输入中文，一般在没有选定饲组前，也就是在拼音阶段， Vue 是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以用＠input 来替代 v-model ，只不过v-model会在不同的表单上进行智能处理。

<div id="app">
				<textarea v-on:input="Introduce">我是默认初始值</textarea>
				<p>
					评语:{{message}}
				</p>
			</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				message:''
			},
			methods:{
				Introduce:function(event){
					this.message = event.target.value;
				}
			}
		});
	</script>

在这里插入图片描述

单选框/按钮

1）单独使用
单选按钮在单独使用时，官方文档标明不需要 v-model ，可以直接使用 v-bind 绑定布尔类型为真选中，为否时不选。
但不推荐使用v-bind进行绑定，建议用 v-model 配合 value 使用。

<div id="app">
				性别:
				<label>男</label>
				<input type="radio" v-bind:checked="picked"/>
			</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				picked:false
			}
		});
	</script>

<div id="app">
				性别:
				<label>男</label>
				<input type="radio" v-model="picked" value="man"/>
			</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				picked:''
			}
		});
	</script>

（2）组合使用
如果是组合使用来实现互斥选择效果。

<div id="app">
				专业
				<label for="ui">UI</label>
				<input id="ui" type="radio" v-model="profession"  value="ui"/>
				<label for="web">前端</label>
				<input id="ui" type="radio" v-model="profession"  value="web"/>
				<label for="web">PHP</label>
				<input id="ui" type="radio" v-model="profession"  value="PHP"/>
				<p>您选择的专业是{{profession}}</p>
			</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				profession:'ui'
			}
		});
	</script>

在这里插入图片描述

数据 profession值与单选按钮的 value 值一致时，就会选中该项。

复选框/多选按钮

复选框也分单独使用和组合使用，不过用法稍与单选不同。
（1）单独使用
复选框单独使用时，是用 v-model来绑定一个布尔值。（注意：虽然v-bind绑定后的效果也一样，但只是效果一样，数据并未发生改动）

<div id="app">
				<label>多选按钮</label>
				<input type="checkbox" v-bind:checked="status"/>
			</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				status:true
			}
		});
	</script>

在这里插入图片描述
在这里插入图片描述
（1）单独使用
因为v-bind绑定单个多选按钮无法实现数据驱动，所以单独使用复选框时，语法指令为v-model

<div id="app">
				<label>多选按钮</label>
				<input type="checkbox" v-model="status"/>
			</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				status:true
			}
		});

在这里插入图片描述
在这里插入图片描述
（1）单独使用
对上面案例进行修改调整

<div id="app">
				<label for="checked">选择状态{{status}}</label>
				<input id="checkbox" type="checkbox"  v-model="status"/>
			</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				status:true
			}
		});
	</script>

此时在勾选时，数据status值变为了true, label 渲染的内容也会更新。
在这里插入图片描述
此时在勾选时，数据status值变为了true, label 渲染的内容也会更新。
（2）组合使用
组合使用时，也是v-model与value 一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组当中，就会选中这一项。这一过程是双向的，在勾选时value 的值也会自动 push这个数组中，示例代码如下

<div id="app">
			   <label for="swim">游泳</label>
			   <input type="checkbox" v-model="checkList" value="swim" id="swim"/>
			   <label for="ps">爬山</label>
			    <input type="checkbox" v-model="checkList" value="ps" id="ps"/>
				<label for="lh">轮滑</label>
				 <input type="checkbox" v-model="checkList" value="lh" id="lh"/>
				 <p>你选择的爱好有{{checkList}}</p>
				 </div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				checkList:[]
			}
		});
	</script>

在这里插入图片描述
Vue实现全选与全不选1

<div id="app">
		全选:<input type="checkbox" v-model="checkAll" @click="changeStatus"/>
			<ul>
				<li v-for="book in books" :key="book.name">
					{{book.name}}
					<input type="checkbox" v-model="checkList" :value="book.name"/>
				</li>
			</ul>
			<p>选项:{{checkList}}</p>
			</div>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				checkAll:false,
				checkList:[],
				books:[
					{name:'西游记'},
					{name:'三国演义'},
					{name:'红楼梦'},
					{name:'水浒传'}
				]
			},
			methods:{
				changeStatus:function(){
					var _this = this;
					if(!_this.checkAll){
						_this.books.forEach(function(item,index){
							_this.checkList.push(item.name)
						})
					}else{
						_this.checkList = [];
					}
				}
			}
		});
	</script>

在这里插入图片描述

<div id="app">
			全选:<input type="checkbox" v-model="checkAll" @click="changeStatus" />
			<ul>
				<li v-for="book in books">
					{{book.name}}
					<input type="checkbox" v-model="book.changeStatus" />
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					checkAll: false,
					books: [
						{name: '西游记',changeStatus: false},
						{name: '三国演义',changeStatus: false},
						{name: '红楼梦',changeStatus: false},
						{name: '水浒传',changeStatus: false},
					]					
				},
				methods: {
					changeStatus:function(){
						if (this.checkAll) {
							this.books.forEach(function(item,index){
								item.changeStatus = false
							})
						}else{
							this.books.forEach(function(item,index){
								item.changeStatus = true
								})
						}
					}
				}
					
			});
		</script>

在这里插入图片描述
下拉选择列表
选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。

单选：
在这里插入图片描述
在这里插入图片描述
多选：
给添加属性 multiple 就可以多选了， 此时v-model 绑定的是一个数组。与复选框用法类似，多选：按住Ctrl+点击即可。
在这里插入图片描述
在这里插入图片描述
动态下拉选择列表
在业务中，经常用 v-for 动态输出，value和text 也是用 v-bind 来动态输出的。例如：
在这里插入图片描述
在这里插入图片描述
表单输入绑定修饰符
.lazy延迟修饰符
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
在这里插入图片描述
.number数字修饰符
这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
在这里插入图片描述
过滤空白修饰符
给 v-model 添加 trim 修饰符，可以自动过滤用户输入的首尾空白字符
在这里插入图片描述
在这里插入图片描述

web-Queen
关注
Vue中的表单与v-model
Taegan1_1的博客
02-04 316
1. v-model基本用法 Vue中通过指令v-model对表单完成双向绑定。 1.1 文本输入框 <!-- 文本输入框 --> <body> <div id="app"> <input type="text" v-model="message" placeholder="Please input text"> ...
Vue表单与v-model
baidulixueqin的博客
04-13 308
Vue表单与v-model Ant Design Vue 文档 表单基本用法 input/textarea/checkbox/radio/select/from 修饰符 .lazy/.number/.trim 运行环境 新建文件vue-demo,用Vue的脚手架给它初始化下。 vue create . 选择在当前目录创建,使用默认的vue2 yarn serve 表单基本用法 1.input 文本 2.textarea 多行文本 <template> <div id="app"&
Vue的表单v-model
weixin_45343878的博客
07-13 254
v-model基本用法 单选框按钮 复选框按钮 下拉选择列表 表单绑定修饰符 v-model基本用法 用它们可以完成数据的录入、校验、提交等。 Vue 提供了 v-model 指令，用于在表单类元素上双向绑定数据。 注意： ①使用 v-model 后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的 value属性（解耦初始化value属性） ②对于< textarea> 之...
Vue:v-model指令在其他元素类型的使用
weixin_33937499的博客
08-28 208
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> &l...
v-model 和表单
Kofe_Chen的博客
11-29 331
v-model 指令用于表单类元素双向绑定数据 <div id="app"> input 和 textarea 用法： <input type="text" v-model="value"> 下面实时显示 value 的值 input 输入什么右边就显示什么 ---> {{value}} <textarea cols="30" rows="10" v-m...
Vue表单和v-model
xiaobangsky的专栏
12-22 343
Vue表单和v-modelVue表单介绍一些form表单中的基础组件用法inputtextareacheckboxradioselectform修饰符.lazy.number.trimv-model代码示例自定义input总结ant-design-vue的使用 Vue表单 主要是按照Vue的文档，进行CRM操作，文档链接文档链接 介绍一些form表单中的基础组件用法 form表单中有哪些基本组件，如：input/textarea/checkbox/radio/select/form input //ht
vue 表单之通过v-model绑定单选按钮radio
10-17
只需定义一个数据属性，并通过`v-model`将其与单选按钮的`value`关联，Vue就能自动跟踪和更新选中状态。同时，设置默认值也变得直观，只需为`v-model`指定相应的`value`即可。这极大地提高了开发效率，减少了出错的...
Vue之表单与v-model
woshierdanya的博客
07-26 892
课程大纲 （1）v-model基本用法 （2）单选框/按钮 （3）复选框/多选按钮 （4）下拉选择列表 （5）表单输入绑定修饰符 v-model基本用法 表单控件在实际业务较为常见，比如单选、多选、下拉菜单、输入框等，用他们可以完成数据的录入、校验、提交等。Vue提供了v-model指令，用于在表单类元素上双向绑定数据 例如：在输入框上使用时，输入的内容会实时映射到绑定的数据上 对于文本域tex...
vue指令之表单控件绑定v-model v-model与v-bind结合使用
10-17
在Vue.js中，`v-model` 是一个非常重要的指令，它实现了双向数据绑定，使得Vue实例的数据和表单控件的值能够实时同步。在HTML表单元素上使用`v-model`，我们可以轻松地处理用户输入，而无需手动编写事件监听器和数据...
Vue表单之v-model绑定下拉列表功能
10-17
其中一个常用的场景是在表单中绑定数据，而在使用Vue.js进行表单开发时，v-model是一个非常重要的指令，用于实现表单输入和应用状态之间的双向绑定。 ### v-model与下拉列表 下拉列表是表单中的常见元素，它允许...
vue.js 解决v-model让select默认选中不生效的问题
11-20
在Vue.js开发中，我们经常使用`v-model`指令来实现数据双向绑定，尤其是在处理表单元素如`select`下拉选项时。然而，当遇到`v-model`无法使`select`默认选中指定选项的问题时，开发者可能会感到困惑。这个问题通常...
v-model和：model的区别
gua551100gua的博客
10-06 318
在使用时，form上面使用的是:model；而在表单里面的el-input使用的是v-model。那么这两者有什么区别呢？
14 Vue3中使用v-model绑定输入框
最新发布
源滚滚编程
12-19 1348
v-model用于实现双向数据绑定，使用v-model绑定输入框是Vue3中最常见的用法之一。比如，在制作登录界面的时候，我们会使用v-model绑定用户名和密码，这里的用户名和密码都是输入框。
Vue的组件通讯方式v-model
L_jin_c的博客
10-20 278
哎`落后了落后了，Vue处理表单除了可以用v-model绑定数据，也可以在子组件上使用v-model，实现父子传值。 细想一下确实也是，v-model是:value和@input组合的语法糖。 父组件About1.vue <template> <div> About1 <!-- v-model实际就是:value="text"和@input="text=$event.target.value"的语法糖...
双向数据绑定与父子组件通信：v-model与.sync详解
m0_60153106的博客
10-13 305
v-model v-model能够实现双向数据绑定（数据model改变会自动响应到UI层，UI层的数据改变能够同步到model层），一般用在表单的双向数据绑定。 v-model会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。 ---在表单上--- <input v-model="searchText"/> 等价于： <input :value="searchText" @input="search=$event
v-mode在form表单的应用和v-bind动态绑定class样式（超详细）
m0_62823653的博客
05-06 810
第一部分：v-mode在form表单的应用 一.普通input框 <!-- 第一个输入框及获取值 .number转数值 .trim清除左右空格--> <input v-model.number.trim="text1" type="text" />{{ sum }} 二.单选框 <!-- 第二个单选框获取值 --> <!-- 设置name属性可以实现单选效果 --> <!-- 想要获取到选男：或者选女，需要设置 v-model --&gt
v-model
HQ\(^o^)/的博客
09-01 259
在v2中，v-model ===> @input, value。通过这两个可以view层输入的值影响data里面的数据,data的属性值发生改变也会影响view层的更新。常见的就是 利用elementui 组件库里的 form表单实现。利用v-bind:绑定响应式数据oninput触发事件并传递数据。在vue2中 v-model 的实现就是。在v3中，v-model ===>
深入理解v-model
GHkmmm的个人博客
08-06 307
v-model的实质 <input type="text" v-model="username"> 其实v-model实质上就是一个语法糖，等价于 <input type="text" :value="username" @input="username=$event.target.value"> 相当于对input框的input事件进行了监听，其实在vue的源码中也是这么实现的 想要手写实现 修改props值的问题 在日常开发中，我们经常会遇到需要修改props中的某个值的场
【vue】form表单应用
weixin_39266845的博客
07-27 4587
【vue】form表单应用
Vue.js表单与v-model深度解析
"Vue表单及表单绑定方法的实践示例" 在Vue.js框架中，表单和表单绑定是核心功能之一，它允许开发者轻松地实现数据模型与用户界面之间的双向数据同步。`v-model`指令是Vue实现这一功能的关键，它用于表单元素，如`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值