压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指

作者:神秘网友 发布时间:2020-10-15 18:57:22

压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指

压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指令

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

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

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

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

压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指

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

多行文本框跟输入框的使用方法也是类似的,都是使用v-mode=‘msg’ 完成两者之间的关联绑定。当修改vue实例中的msg的值的时候,就会自动修改视图中输入框内的value值。同样的,当视图中多行文本框的value值改变的时候,也会相应地改变vue实例中地msg的值。
压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指
注意:多行文本框会涉及到换行符,多行文本框内多个换行符,在视图中都只会识别成一个空格键。
压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指

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

在复选框代码中,添加代码v-model=“toggle”就可以将复选框中的值跟vue实例中的msg数据关联起来。但是,由于现在checkbox只有一个空值,可以理解为只有一种选择,因此,当我们选中一个选项的时候,全都会被选中,取消一个的时候,也全部会取消。
压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指
解决方案
解决方案:需要在每一个选项中添加自己的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>

压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指

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

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

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

压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指

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>

压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指

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

使用v-model绑定表单的数据,就算将表单的type属性更改为
number,最终获取到数据也还是string类型的。如下图
压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指
.number可以帮助我们把能被解析的数据转换为number类型,不能识别的为string类型。
压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指

当用户在输入框内输入内容的时候,有时候会多输入一些空格,那么,这时候,我们需要去掉用户多余的空格。这时,我们就可以在v-mode的后面添加上.trim去掉前后多余的空格。
压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指

压扁vue.js---阿qiao的vue.js学习笔记(3)----深入学习v-model指相关教程

  1. 支付宝支付原理

    支付宝支付原理 https://www.lanqiao.cn/vip # 访问支付宝开发平台登录,可以访问开发者中心 https://open.alipay.com/platform/home.htm # 可以参考电脑网站支付 熟悉电脑支付整体流程 https://docs.open.alipay.com/270/105899/ 2.1 第一步:创建应用(这里

  2. 2020-10-03

    2020-10-03 效果图–wx:–qiao----min----liu– const formatTime = date = { const year = date.getFullYear() //年 const month = date.getMonth() + 1 //月 const day = date.getDate() //日 const hour = date.getHours() //时 const minute = date.getMi

  3. git .git目录提交_压扁Git提交

    git .git目录提交_压扁Git提交 git .git目录提交 I use Git every day and I wrote a Git guide and a Git Cheat Sheet in the past. 我每天都使用Git,过去我写过Git指南和Git备忘单 。 I consider myself a Git fan, but …I’m not an expert of Git. 我认

  4. lanqiao 小白算法练习 合并石子 区间dp

    lanqiao 小白算法练习 合并石子 区间dp 问题描述 在一条直线上有n堆石子,每堆有一定的数量,每次可以将两堆相邻的石子合并,合并后放在两堆的中间位置,合并的费用为两堆石子的总数。求把所有石子合并成一堆的最小花费。输入格式 输入第一行包含一个整数n,