表单控件绑定

最新推荐文章于 2024-05-29 19:55:50 发布

原创最新推荐文章于 2024-05-29 19:55:50 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

12 篇文章

订阅专栏

表单控件绑定

通过 v-model指令可以对表单元素进行双向数据绑定，在修改表单元素值的同时，Vue实例中对应的属性值也会随之更新，反之亦然。

单选按钮：选中时，v-model绑定的属性值是value值
多选按钮，单一的复选框，绑定的是布尔类型值；多个复选框时，v-model将复选框的value值绑定到同一个数组
下拉菜单：单选绑定的是value值，多选是将value值绑定到一个数组
修饰符
.lazy 在每次 change 事件后更新数据
.number 让用户输入自动转换为数字，在 v-model 后添加 .number 修饰符
.trim 自动去除用户输入内容中两端的空格，在 v-model 后添加 .trim 修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript"></script>
		<style type="text/css">
			.container{
				display: flex;
				justify-content: space-around;
				align-items: flex-end;
			}
			button{
				margin-bottom: 40px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>单行文本框</p>
			<input v-model="name" placeholder="请输入书名" /><br>
			<ul>
				<li v-for="(book,index) in results" >{{index}}--{{book.name}}</li>
			</ul>
			<input v-model.lazy="name" placeholder="请输入姓名" /><br>
			<p>当前输入：{{name}}</p>
			<p>多行文本框</p>
			<textarea v-model="message" placeholder="单击此处编辑"></textarea>
			<p style="white-space: pre;">{{message}}</p>
			<p>单选框</p>
			<input v-model="sex" type="radio" value="男"/>男  
			<input v-model="sex" type="radio" value="女"/>女
			<p>你的性别:{{sex}}</p>
			<p>多选框--单个绑定的是布尔值</p>
			<input type="checkbox" v-model="checked"  />选中：{{checked}}
			<p>多选框--多个绑定的是value值</p>
			<input type="checkbox" v-model="arr" value='oppo' />oppo
			<input type="checkbox" v-model="arr" value='iphone' />苹果
			<input type="checkbox" v-model="arr" value='sansung' />三星
			<p v-if="arr!=''">选定的是：{{arr}}</p>
			<p>下拉列表菜单</p>
			<select v-model="brand" multiple >
				<option value="oppo">oppo</option>
				<option value="iphone">苹果</option>
				<option value="sumsang">三星</option>
			</select>
			<p>{{brand}}</p>
			<div class="container">
				<div class="left">
					<p>可选职位</p>
					<select v-model="job" multiple size="6">
						<option v-for="item in joblist">{{item}}</option>
					</select>
				</div>
				<div class="center">
					<button type="button" @click="tomyjob">>></button><br>
					<button type="button" @click="tojob"><<</button>
				</div>
				<div class="right">
					<p>已选职位</p>
					<select multiple size="6" v-model="myjob">
						<option v-for="item in myjoblist">{{item}}</option>
					</select>
				</div>
			</div>
		</div>
		<script>
			var demo=new Vue({
				el:'#app',
				data:{
					brand:'',
					checked:false,
					arr:[],
					name:'',
					message:'',
					sex:'',
					books:[
						{name:'java'},{name:'html'},
						{name:'javascript'},{name:'css'},
						
					],
					results:'',
					joblist:['歌手','演员','酒店管理','教师','公务员','公司职员'],
					myjob:[],//已选职位列表中选中的选项
					job:[],  //可选职位列表中选中的选项
					myjoblist:[],//已选职位列表
				},
				methods:{
					tomyjob(){
						for(var i=0;i<this.job.length;i++){
							this.myjoblist.push(this.job[i]);
							var index=this.joblist.indexOf(this.job[i]);
							this.joblist.splice(index,1)
						}
						this.job=[]
					},
					tojob(){
						for(var i=0;i<this.myjob.length;i++){
							this.joblist.push(this.myjob[i]);
							var index=this.myjoblist.indexOf(this.myjob[i]);
							this.myjoblist.splice(index,1)
						}
						this.myjob=[]
					}
				},
				watch:{
					name(){
						var books=this.books;
						if(this.name!=''){
							var search=this.name.trim().toLowerCase();
							books=books.filter(function(el){
								if(el.name.trim().toLowerCase().indexOf(search)!=-1)
								return el
							})
							this.results=books
						}else
							this.results=books
					}
				},
				
			})
		</script>
	</body>
</html>