v-model与表单控件如何实现双向绑定 --重学vue.js笔记(3)

最新推荐文章于 2024-04-03 16:05:44 发布

前端一号站

最新推荐文章于 2024-04-03 16:05:44 发布

阅读量292

点赞数 1

分类专栏： vue快速入门与提高文章标签： v-model v-model.lazy v-mode.trim vue 去掉首位字符串 vue数据双向绑定

本文链接：https://blog.csdn.net/weixin_39553363/article/details/109075319

版权

vue快速入门与提高专栏收录该内容

15 篇文章 1 订阅

订阅专栏

—— 学习是自己的事情，需要自己重视 ——
关注我，让我们一起进步…

v-model

表单控件中元素与数据双向关联

1.输入框与数据双向绑定

在输入框内代码中添加 v-model=‘msg’ ，那么，输入框中的value值就会自动绑定msg的值。当在页面中修改输入框的值的时候，则会自动相应vm中的msg的值。当修改msg的值的时候，也会自动修改页面中输入框的value值

在这里插入图片描述

2.多行文本框与数据的双向绑定

多行文本框跟输入框的使用方法也是类似的，都是使用v-mode=‘msg’ 完成两者之间的关联绑定。当修改vue实例中的msg的值的时候，就会自动修改视图中输入框内的value值。同样的，当视图中多行文本框的value值改变的时候，也会相应地改变vue实例中地msg的值。

注意：多行文本框会涉及到换行符，多行文本框内多个换行符，在视图中都只会识别成一个空格键。

3.复选框与数据的双向绑定

在复选框代码中，添加代码v-model=“toggle”就可以将复选框中的值跟vue实例中的msg数据关联起来。但是，由于现在checkbox只有一个空值，可以理解为只有一种选择，因此，当我们选中一个选项的时候，全都会被选中，取消一个的时候，也全部会取消。

解决方案
解决方案：需要在每一个选项中添加自己的value值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
	    <div id="app">
			<p>选择你喜欢的水果</p>
			<input type="checkbox" id="checkbox1" value='苹果' v-model="toggle" />
			<label for="checkbox1">苹果</label>
			<input type="checkbox" id="checkbox1" value='香蕉'  v-model="toggle" />
			<label for="checkbox1">香蕉</label>
			<input type="checkbox" id="checkbox1" value='李子' v-model="toggle" />
			<label for="checkbox1">李子</label>
			<input type="checkbox" id="checkbox1" value='桃子' v-model="toggle" />
			<label for="checkbox1">桃子</label>
	
			 <hr>
		     你选择的是 {{toggle}}	
		</div>
	   <script type="text/javascript">
	      let vm=new Vue({
			  el:'#app',	
			  data:{
				    toggle:[]
			  },
		   
		  });
		
	   </script>
	</body>
	
</html>

在这里插入图片描述

原理：一开始的时候，toggle是没有数据的，而每个选项中的value值也仅仅存放在每个标签上。因此，toggle一开始的值是空值，当我们点击每一项的时候，checkbox具体value值就会添加到toggle上了。

4.单选框与数据的双向绑定

单选框的使用方法与复选框使用方法差不多，只不过把type=‘checkbox’改为type=‘radio’ 就可以了。

在这里插入图片描述

5.下拉列表框与数据的双向绑定

在select开始标签内添加 v-model='toggle’这句代码就可以完成下拉列表框与数据的双向绑定了。
注意：不是给每一项的option添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
	    <div id="app">
			<p>选择你喜欢的水果</p>
		    <select v-model="toggle">
		    	<option value="苹果">苹果</option>
				<option value="李子">李子</option>
				<option value="桃子">桃子</option>
				<option value="香蕉">香蕉</option>
		    </select>
	
			 <hr>
		     你选择的是 {{toggle}}	
		</div>
	   <script type="text/javascript">
	      let vm=new Vue({
			  el:'#app',	
			  data:{
				    toggle:""
			  },
		   
		  });
		
	   </script>
	</body>
	
</html>

在这里插入图片描述

v-model.lazy

当我们实现了输入框跟数据的双向绑定的时候，可以发现，当我们在输入框内输入数据的时候，会出现实时更新的效果，实际上，这是触发了输入框的input事件。
如果，我们想实现另外一种效果，就是当我们按下回车键或者是失去焦点的时候，才更新最后的数据，提高页面性能，这时，我们可以在v-model后面添加.lazy.

v-model.number

使用v-model绑定表单的数据，就算将表单的type属性更改为
number,最终获取到数据也还是string类型的。如下图

.number可以帮助我们把能被解析的数据转换为number类型，不能识别的为string类型。

v-model.trim

当用户在输入框内输入内容的时候，有时候会多输入一些空格，那么，这时候，我们需要去掉用户多余的空格。这时，我们就可以在v-mode的后面添加上.trim去掉前后多余的空格。

前端一号站

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
v-model与表单控件如何实现双向绑定 --重学vue.js笔记(3)

—— 学习是自己的事情，需要自己重视 ——关注我，让我们一起进步…v-model表单控件中元素与数据双向关联1.输入框与数据双向绑定在输入框内代码中添加 v-model=‘msg’ ，那么，输入框中的value值就会自动绑定msg的值。当在页面中修改输入框的值的时候，则会自动相应vm中的msg的值。当修改msg的值的时候，也会自动修改页面中输入框的value值2.多行文本框与数据的双向绑定多行文本框跟输入框的使用方法也是类似的，都是使用v-mode=‘msg’ 完成两者之.
复制链接

扫一扫