v-mode

_语义错误

已于 2022-07-15 19:40:01 修改

阅读量614

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： javascript vue.js 前端开发语言

于 2022-07-13 16:37:26 首次发布

本文链接：https://blog.youkuaiyun.com/m0_66451927/article/details/125760311

VUE 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了Vue.js中的v-model指令，包括其基本使用、原理、与radio、checkbox、select的结合，以及修饰符lazy、number和trim的用法。v-model实现了表单元素和数据的双向绑定，使数据交互更便捷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4、v-model 和 check-box

一、 v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定。我们也可以将 v-model 用于textarea元素

双向绑定值的是绑定的双发，只要有其中一方发生改变，两者都会改变，区别一下之前的v-bind 只是单向的。

1、基本使用

<!-- input -->
<div id="app">
  <input type="text" v-model="message">
  {{message}}

<!-- textarea -->
<!-- <textarea name="location" id="" cols="30" rows="10"  v-model="message">
			{{message}}
		</textarea> -->

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

2、原理

<div id="app">
  <!--<input type="text" v-model="message">--> <!-- 第一种 用 v-model -->
  <!--<input type="text" :value="message" @input="valueChange">--><!-- 第二种 用两个函数，v-bind 和 v-on 也就是v-model 的原理，等同上面第一种-->
  <input type="text" :value="message" @input="message = $event.target.value">
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      valueChange(event) {
        this.message = event.target.value;
      }
    }
  })
</script>

3、v-model 和 radio 结合

<div id="app">
			<label for="male">
				<input type="radio" id="male" value="男" v-model="sex">男
				<!-- <input type="radio" id="male" name = "sex" value="男" v-model="sex">男 -->
				<!-- 添加name 属性使得 radio 互斥，但是当 v-model 绑定一样的时候，name 去掉也能实现互斥 -->
			</label>
			<label for="female">
				<input type="radio" id="female" value="女" v-model = "sex">女
			</label>
			<label for="female">
				<input type="radio" id="others" value="其他" v-model = "sex">其他
			</label>
			<!-- 为方便观看sex，来个h2 -->
			<h2>您选择地性别是：{{sex}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					message:'你好啊',
					sex:'女',//给 radio 绑定默认值
				}
			})
		</script>

4、v-model 和 check-box

复选框分为两种情况：单个勾选框和多个勾选框
单个勾选框：

v-model即为布尔值。
此时input的value并不影响v-model的值。

多个复选框：

当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
当选中某一个时，就会将input的value添加到数组中。

<div id="app">
			<!-- 1、checkbox 单选框 -->
		<!-- 	<label for="agree">
				<input type="checkbox" id="agree" v-model = "isAgree">同意协议
			</label>
			<h2>您选择的是：{{isAgree}}</h2>
			<button :disabled=!isAgree>下一步</button> -->
			
			<!-- 2、checkbox 多选框 -->
			<label for="">
				<input type="checkbox" value="篮球" v-model="hobbies">篮球
				<input type="checkbox" value="足球" v-model="hobbies">足球
				<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
				<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
				<h2>您的爱好是：{{hobbies}}</h2>
			</label>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					message:'你好啊',
					// -------------单选框--------------------
					isAgree:false,
					// --------------多选框--------------------
					hobbies:[]
					
				}
			})
		</script>

5、v-model 和 select

和checkbox一样，select也分单选和多选两种情况。
单选：

v-model绑定的是一个值。
当我们选中option中的一个时，会将它对应的value赋值到mySelect中

多选：

v-model绑定的是一个数组。
当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

<body>
		<div id="app">
			<!-- 1、单选，少用，了解即可 -->
			<select name="abc" id="" v-model="fruit">
				<option value="苹果">苹果</option>
				<option value="香蕉">香蕉</option>
				<option value="雪梨">雪梨</option>
				<option value="毛桃">毛桃</option>
			</select>
			<h2>您选择地水果是：{{fruit}}</h2>
			
			<!-- 1、多选 -->
			<select name="abc" v-model="fruits" multiple>
				<option value="苹果">苹果</option>
				<option value="香蕉">香蕉</option>
				<option value="雪梨">雪梨</option>
				<option value="毛桃">毛桃</option>
			</select>
		<h2>您选择地水果是：{{fruits}}</h2>
		<p>tips：按ctrl键可以多选</p>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					message:'你好啊',
					fruit:'香蕉',
					fruits:[]
				}
			})
		</script>
	</body>

6、值绑定

前面的value中的值，发现都是在定义input的时候直接给定的。但是真实开发中，这些input的值可能是从网络获取或定义在data中的。所以我们可以通过v-bind:value动态的给value绑定值。和v-bind相似。

<body>
		<div id="app">
			<h2>您选择的爱好是：{{hobbies}}</h2><p>tips：按ctrl键可以多选</p>
			<!-- 值绑定  :value="item"-->
		<!-- 	<label v-for="item in originHobbies">
				<input type="checkbox" :value="item" v-model="hobbies">{{item}}
			</label> -->
			<!-- 动态绑定 id -->
			<label v-for="item in originHobbies" :for="item">
				<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
			</label>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊',
					hobbies:[],
					originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
				}
			})
		</script>
	</body>

7、v-model 修饰符的使用

（1）lazy修饰符：

默认情况下，v-model默认是在input事件中同步输入框的数据的。也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
lazy修饰符可以让数据在失去焦点或者回车时才会更新。

<body>
		<div id="app">
		<!-- 1、修饰符：lazy -->
		<input type="text" v-model.lazy="message">
		<h2>{{message}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊'
				}
			})
		</script>
	</body>

（2）number修饰符：

默认情况下，在输入框中无论我们输入的是字母还是数字都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。 number修饰符可以让在输入框中输入的内容自动转成数字类型。

<body>
		<div id="app">
		<!-- 2、修饰符：number -->
		<!-- <input type="number" v-model="age"> -->
		<input type="number" v-model.number="age">
		<h2>{{age}} {{typeof age}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊',
					age:0
				}
			})
		</script>
	</body>

（3）trim修饰符：

如果输入的内容首尾有很多空格，通常我们希望将其去除， trim 修饰符可以过滤内容左右两边的空格

<body><!-- 3、修饰符：trim -->
		<input type="text" v-model.trim="name">
		<h2>您输入的名字是：{{name}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊',
					age:0,
					name:''
				}
			})
		</script>
	</body>

然后在输入框中输入前后含有空格的文字，再在浏览器控制台输入 app.name查看

参考：最全最新Vue、Vuejs教程，从入门到精通