Vue表单输入绑定v-model的使用

最新推荐文章于 2021-07-17 11:27:06 发布

耕种的小码农

最新推荐文章于 2021-07-17 11:27:06 发布

阅读量225

点赞数 1

文章标签： vue html

本文链接：https://blog.csdn.net/qq_18086979/article/details/109430635

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.min.js"></script>
	</head>
	<body>
		<div id="app"> 
		   <form>
			     <!--文本框输入绑定的值 -->
			    {{username}}<br/>
			    <input type="text" name="username" v-model="username" /><br/>
				 <!--文本域输入绑定的值 -->
				{{textContent}}<br/>
				<textarea cols="20" rows="5" name="textContent" v-model="textContent"></textarea>
				<br/>
				
				 <!--复选框选择绑定的值 -->
			    {{hobbys2}}
				<br/>
				<span  v-for="item,index in hobbys">
					<input type="checkbox" name="hobby"  :value="item"  v-model="hobbys2"/>{{item}}
				</span>
				<br/>
				<!--单选按钮选择绑定的值 -->
				{{dan_hobby}}
				<br/>
				<span v-for="item,index in hobbys">
					<input type="radio" name="dan" :value="item" v-model="dan_hobby" />{{item}}
				</span>
				
				<br/>
				<!-- 复选框 -->
				
				<select name="cityname" v-model="cityname">
					<option disabled="disabled">请选择</option>
					<option  v-for="item,index  in city" :value="item">{{item}}</option>
				</select>
				{{cityname}}
				<br/>
				<hr/>
				<!-- v-model修饰符    -->
				<!--文本框默认是文本，要想将文本获取转化为数字 number -->
				年龄:
				<input  type="text" name="age" v-model.number="age" @click="validate" />
				<br/>
				<!-- 文本框时实时更新数据的，但希望文本框修改完了，在修改 调用绑定的值 .lazy -->
				{{lazyValue}}<br/>
				<input type="text"  name="lazyValue" v-model.lazy.trim="lazyValue"/>
		   </form>
			
		</div>
		<script>
			let app=new Vue({
				el:"#app",
				data:{
					username:"",//  <!--文本框输入绑定的值 -->
					textContent:"",// <!--文本域输入绑定的值 -->
					
					hobbys:["看书","打篮球","写代码"], //<!--默认提供选择的值 -->
					hobbys2:[],//<!--复选框选择绑定的值 -->
					dan_hobby:"", //<!--单选按钮选择绑定的值 -->
					city:["北京","上海","山海"],
					cityname:"", //<!-- 复选框绑定的值 -->
					
					age:0,
					lazyValue:"",
				},
				methods:{
					validate:()=>{
					   alert(typeof	app.age);
					   app.age +=1;
					}
				},
				watch:{
					age:function(){
						alert( app.age);
					},
					lazyValue:(val)=>{
						alert(val.length);
					}
				}
			});
			
			
		</script>
	</body>
</html>

耕种的小码农

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue表单输入绑定v-model的使用

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <form> <!--文本框输入绑
复制链接

扫一扫