VUE初学--表单输入与v-model

最新推荐文章于 2023-02-23 15:26:49 发布

前端大流中的小菜鸡

最新推荐文章于 2023-02-23 15:26:49 发布

阅读量1.1k

点赞数 2

分类专栏： VUE 文章标签： VUE--表单输入与v-model

本文链接：https://blog.csdn.net/qq_42970981/article/details/103488156

版权

本文深入探讨了Vue中v-model的用法，包括在input、单选框、复选框和下拉选择框中的应用，以及如何使用修饰符实现更精细的控制。通过实例展示了v-model如何实现双向数据绑定，详细解释了v-bind和v-on在v-model中的作用，以及它们如何协同工作以更新和响应用户输入。

摘要由CSDN通过智能技术生成

1、基本用法

1、v-modle 在input的基本用法

表单控件在实际业务需求中运用是非常常见，比如，输入框、下拉框、多选、单选等，一般常见于，用户登录注册等，用他们完成数据录入，校验，提交等
Vue提供了 v-model 指令在表单元素上创建双向数据绑定他会根据控件类型自动选取正确的方法来更新元素

	<div id="app">
		<input type="text" placeholder="请输入" v-model="message">
		<p>{
   {
    message }}</p>
	</div>
	
	<script>
		var vm = new Vue({
   
			el:"#app",
			data:{
   
				message:'Hellow big shuaige'
			}
		})
	</script>

以下是执行结果，在input中的value发生改变时，p中文案发生改变输入的内容会实时映射到绑定的数据上
对于文本域 textarea 同样适用
在这里插入图片描述
v-model 本质上是 语法糖 负责监听用户的输入时间以及数据更新
注意事项：

1.使用 v-model 后，表单控件显示的值只依赖所绑定的数据，不在关心初始化时的 value 属性
v-model 建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定

	<input type="text" value="你好" v-model="message">
	// value 的值在使用v-model后，value无效，value属性被解耦

	<textarea v-model="message">Hellow Vue</textarea>
	// textarea 使用 v-model 后 textarea 插入的值无效

使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉子时才会触发更新。如果希望总是实时更新，可以用 v-input(@input) 来代替v-model

	<textarea v-on:input="textareaMsg">我是</textarea>
	// 此时 textarea 无 v-model 初始值可以展示
	<script>
		var vm = new Vue({
   
			el:'#app',
			data:{
   
				msg:''	
			},
			methods:{
   
				textareaMsg:function(e) {
   
					this.msg = e.target.value
				}
			}
		})
	</script>

在这里插入图片描述

v-model 其实是 v-bind 和 v-on 的语法糖

	<input type="text" placeholder="请输入" v-bind:value="firstMsg" v-on:input="firstMsg = $event.target.value">
	<p>{
   {
    firstMsg }}</p>
	<script>
		var vm = new Vue({
   
			el:'#app',
			data:{
   
				firstMsg:''
			}
		})
	</script>

在这里插入图片描述

	<input type="text" v-modle="firstMsg"> 是 <input type="text" placeholder="请输入" v-bind:value="firstMsg" v-on:input="firstMsg = $event.target.value"> 的语法糖

根据上面这段代码，会发现它由两部分组成：v-bind:value 和 v-on:input 必须是 value 属性和 iniput 事件，不然不会等价于 v-modle ，在 input 事件中， firstMsg 等于当前输入值

举例关于 v-on:input=“firstMsg = $event.target.valu” 如何作用

	<input type="text" placeholder="请输入" v-on:input="firstChangeMsg">
	<p>{
   {
    firstMsg }}</p>
    <a href="javascript:void(0);" :class="{'link-click':'isclick'}" @click="touchFirstMsg">firstMsg</a>
    <script>
		var vm = new Vue({
   
			el:'#app',
			data:{
   
				firstMsg:'你好：'
			},
			methods:{
   
				firstChangeMsg:function(e) {
   
					this.firstMsg = e.target.value
				},
				touchFirstMsg:function(e) {
   
					this.firstMsg = this.firstMsg + '--A'
				}
			}
		})
	</script>