一、v-model使用原理

 

v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值。

先看一下简单的v-model使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model的基本使用</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{message}}</h1>
			<input type="text" v-model="message" />
			<input type="text"v-model="message" />
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					message:'Nanchen'
				},
			})
		</script>
	</body>
</html>

效果如下:

 为什么要用到v-model?

使用非常方便,提高前端开发效率。在view层,model层相互需要数据交互,即可使用v-model。

其使用原理:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model的使用原理</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{message}}</h1>
			<input type="text" @input="changeValue"  :value="message" />
			<!-- <input type="text"v-model="message" /> -->
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					message:'Nanchen'
				},
				methods:{
					changeValue(e){
						console.log(e);
						this.message = e.target.value
					}
				}
			})
		</script>
	</body>
</html>

oninput 事件在用户输入时触发。

详情请参考菜鸟教程oninput

效果与上图一致。

二、v-model结合radio单选按钮使用

以前写单选按钮:

<label for="one">
	<input type="radio" name="sex" id="one" value="男"/>男
</label>
<label for="two">
	<input type="radio" name="sex" id="two" value="女"checked="checked" />女
</label>
<h1></h1>

 现在要实现双向绑定功能,就是点击哪个性别就会显示在h1里

这里就可以把name去掉,添加v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<label for="one">
				<input type="radio" id="one" value="男" v-model="sex" />男
			</label>
			<label for="two">
				<input type="radio" id="two" value="女" v-model="sex"/>女
			</label>
			<h5>{{sex}}</h5>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					sex:'男'
				},
			})
		</script>
	</body>
</html>

 三、v-model结合checkbox类型的使用

这里实现一个同意协议的小功能,先看效果:

 代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<h1>复选框</h1>
			<label for="one">
				<input type="checkbox"id="one" v-model="isAgree" />同意协议
			</label>
			<br>
			您选择的是:{{isAgree}}
			<br>
			<button type="button" :disabled="!isAgree">下一步</button>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					isAgree:true
				},
			})
		</script>
	</body>
</html>

四、v-model结合checkbox类型使用(多选)

先看实现效果:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<label for="hobby">
				<input type="checkbox" id="hobby" value="篮球" v-model="hobbies">篮球
			</label>
			
			<label for="hobby1">
				<input type="checkbox" id="hobby1" value="足球" v-model="hobbies">足球
			</label>
			<label for="hobby2">
				<input type="checkbox" id="hobby2" value="羽毛球" v-model="hobbies">羽毛球
			</label>
			<label for="hobby3">
				<input type="checkbox" id="hobby3" value="排球" v-model="hobbies">排球
			</label>
			<h2 v-show="hobbies.length>0">{{hobbies}}</h2>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data: {
					hobbies:[]
				},
			})
		</script>
	</body>
</html>

 五、v-model结合checkbox类型使用(值的绑定)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<label :for="index" v-for="(item,index) in arr" :key="index">
				<input type="checkbox" :name="'hobby'+index"  :id="index" :value="item" v-model="hobbies"  />
				{{item}}
			</label>
			<h2 v-if="hobbies.length>0">{{hobbies}}</h2>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					hobbies:[],
					arr:['篮球','足球','羽毛球','排球'],
				},
			})
		</script>
	</body>
</html>

 

 

 六、v-model结合select

1.select单选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>select单选</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<select name="fruit" v-model="fruit">
				<option value="苹果">苹果</option>
				<option value="橘子">橘子</option>
				<option value="水蜜桃">水蜜桃</option>
				<option value="橙子">橙子</option>
			</select>
			<h3>你选择的水果有:{{fruit}}</h3>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					fruit:'苹果',
				},
			})
		</script>
	</body>
</html>

效果如下: 

 2.select多选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>select多选</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<select name="fruits" v-model="fruits" multiple="multiple">
				<option value="苹果">苹果</option>
				<option value="橘子">橘子</option>
				<option value="水蜜桃">水蜜桃</option>
				<option value="橙子">橙子</option>
			</select>
			<h3 v-show="fruits.length>0">你选择的水果有:{{fruits}}</h3>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					fruits:[],
				},
			})
		</script>
	</body>
</html>

效果如下:

 七、v-model的修饰符的使用

v-model的修饰符:

1、v-model.lazy         只有在input输入框发生一个blur时才触发
2、v-model.trim         将用户输入的前后的空格去掉
3、v-model.number         将用户输入的字符串转换成number

这里看这个例子 

v-model.lazy        

只有在input输入框发生一个blur时才触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
		 <h2>{{message}}</h2>
          <input type="text" v-model.lazy="message"/>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					message:'Nan',
					age:30,
					name:'chen'
				},
			})
		</script>
	</body>
</html>

效果如下:

v-model.number :不可以输入字符串

 看例子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		   <input type="number" v-model.number="age" />
		   <h2>{{age}}----{{typeof age}}</h2>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					message:'Nan',
					age:30,
					name:'chen'
				},
			})
		</script>
	</body>
</html>

效果如下:这里输入字符串是输入不了的

v-model.trim 

去除前后空格

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		   <input type="text" v-model.trim="name">
			<h2>{{name}}</h2>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					message:'Nan',
					age:30,
					name:'chen'
				},
			})
		</script>
	</body>
</html>

效果如下图:

Logo

前往低代码交流专区

更多推荐