Vue.js中的v-model表单绑定

通过使用v-model = " 属性"，可以便捷的洞悉表单中使用者选择数据的变化。作用于不同的标签会有不同的效果，都是用于捕捉用户输入的数据存放再Vue实例中。如input标签获取输入值，单选框获取单选值，复选框获取选择值。1.作用于input标签。...

盛世如恋

2803人浏览 · 2022-01-02 10:16:18

盛世如恋 · 2022-01-02 10:16:18 发布

通过使用v-model = " 属性名"，可以便捷的洞悉表单中使用者选择数据的变化。作用于不同的标签会有不同的效果，都是用于捕捉用户输入的数据存放再Vue实例中。如input标签获取输入值，单选框获取单选值，复选框获取选择值。

一、作用于input标签

向input框输入的值会被Vue实例属性获取。就是绑定value属性值。无论是网页和对应的Vue属性的修改都会修改value值。本质上是绑定了输入和选择的value值。

代码实例: 把一个输入框绑定v-model。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<input type="text" v-model="inputvalue">
			<div >{{inputvalue}}</div>
		</div>
		<script>
			const app = new Vue({
				el:"#app",
				data:{ 
					inputvalue:""
				},
				
			});	
		</script>
		
	</body>
</html>

在浏览器中打开开发者工具，修改inputvalue的值。页面也会更新数据

其中input因为type属性值的不同而有不同的样式，除了绑定value属性外，也有绑定checked，如type="checkbox"的复选框。

type为checkbox的input框，当绑定的v-model是一个字符串或者boolean类型时，就会绑定该标签的checked属性，当被勾选为true,否则为false。当绑定的v-model是一个数组时，绑定的就是value值

测试代码: v-model绑定的变量类型分别为字符串，boolean，字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body> 
		
		<div id="app">
			<input type="checkbox" value="确认1" v-model="str">确认框1<br>
			<input type="checkbox" value="确认2" v-model="bool" >确认框2<br>
			
			<input type="checkbox" v-model="nums" value="1"  >one<br>
			<input type="checkbox" v-model="nums" value="2"  >two<br>
			<input type="checkbox" v-model="nums" value="3"  >three<br>
			
			<div>str的值: {{str}}</div>
			<div>bool的值: {{bool}}</div>
			<div>nums的值: {{nums}}</div>
		</div>
		<script>
			const app = new Vue({
				el:"#app",
				data:{ 
					str:"",
					bool:true,
					nums:[]
				},
				
			});	
		</script>
		
	</body>
</html>

初始页面效果:

全选效果:

一般的，绑定输入是动态同步输入数据的value值，绑定选择是绑定固定的value值

二、作用于select标签

使用v-model绑定slect标签时，会获取到页面选择了的option标签的value值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">

			<select v-model="nums">
				<option value="1">one</option>
				<option value="2">two</option>	
			</select>
			<div>{{nums}}</div>
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"",
					nums:[]
				},
			});
			
		</script>
			
	</body>
</html>

三、作用于textarea标签

绑定的是输入的value值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<textarea v-model="value" rows="8" cols="8"></textarea>

			<h2>输入的值为:{{value}}</h2>
		</div>
		<script>
			const app = new Vue({
				el:"#app",
				data:{ 	
					value:""
				},
				
			});	
		</script>
		
	</body>
</html>

页面效果:

四、v-model修饰符

1、lazy

当value值是输入数据获取的时，v-model绑定的是动态的直接获取输入的数据。使用lazy修饰符的话就可以只失去焦点又再更新数据。

代码实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<input type="type" v-model.lazy="inputvalue" >
			<h2>输入框的值:{{inputvalue}}</h2>
		</div>
		<script>
			const app = new Vue({
				el:"#app",
				data:{ 
					inputvalue:""
				},
				
			});	
		</script>
		
	</body>
</html>

页面效果:

当我们输入不失去焦点时:

我们将输入失去焦点:

2、number

动态的绑定数据都是string类型的，使用number可以转换成number类型的值。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<input type="type" v-model.number="inputvalue" >
			<h2>输入框的值:{{inputvalue}}</h2>
			<button @click="getValue()">获取值</button>
			<h2>{{getValue()}}</h2>
		</div>
		<script>
			const app = new Vue({
				el:"#app",
				data:{ 
					inputvalue:""
				},
				methods:{
					getValue:function(){
						return typeof this.inputvalue;
					}
				}
				
			});	
		</script>
		
	</body>
</html>

页面效果：

3、trim

消掉字符串最前面最末尾的空格

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<input type="type" v-model.trim="inputvalue" >
			<h2>输入框的值:{{inputvalue}}</h2>
		</div>
		<script>
			const app = new Vue({
				el:"#app",
				data:{ 
					inputvalue:""
				}
			});	
		</script>
		
	</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^