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

时间:2022-01-02作者:klpeng分类:IT综合浏览:501评论:0

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


目录

一、作用于input标签

二、作用于select标签

三、作用于textarea标签

四、v-model修饰符


一、作用于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>

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

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

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

        其中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>

        初始页面效果:

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

         全选效果:

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

        一般的,绑定输入是动态同步输入数据的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>

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

 三、作用于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>

        页面效果:

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

四、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>

        页面效果: 

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

        

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

         我们将输入失去焦点:

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

         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>

        页面效果:

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

        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.js中的v-model表单绑定

打赏
文章版权声明:除非注明,否则均为彭超的博客原创文章,转载或复制请以超链接形式并注明出处。
相关推荐

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

猜你喜欢