vue的v-model事件

最新推荐文章于 2025-05-10 21:24:16 发布

MakabakaGoodnight

最新推荐文章于 2025-05-10 21:24:16 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue html

本文链接：https://blog.youkuaiyun.com/queryselectorall/article/details/104978865

v-model 表单的双向表单事件

//html代码
<div id="app">
	<p>message is :{{msg}}</p> //在这里引入变量msg
	<input type="text" v-model="msg">
	 //在这里也引入  当文本框的内容发生改变时 上面的p标签内容也会发生改变
</div>

//script代码
var vm = new Vue({
	el:"#app",
	data:{
		msg:" "
	}
})

v-model 双向绑定的原理
1 给表单上添加动态属性value
2 给表单上添加input事件

<p>v-model原理===>{{msg2}}</p>    
<p><input type="text" v-bind:value="msg2" @input="msg2=$event.target.value"></p>
用表单的input事件来设置msg2的值为输入框里面的输入的值
当设置的时候 vue内部会触发 watch 会自动重新进行渲染页面 这样p标签会获取到最新的值

v-model 的指令
.lazy 这个指令会在你光标离开之后才会进行同步更新参考表单的onchange事件
.number 这个如果输入的内容可以用parsefloat进行解析就会显示解析的值如果不能解析就会原样返回
.trim 这个会去掉首尾的空格

<p>lazy修饰符===>{{msg}}</p>
<p><input type="text" v-model.lazy="msg"></p>

 <p>number修饰符===>{{msg}}</p>
<p><input type="text" v-model.number="msg"></p>

<p>trim修饰符===>{{msg}}</p>
<p><input type="text" v-model.trim="msg"></p>

复选框

<div id="app">
	<p><input type="checkbox" v-model="flag"><span @click="flag=!flag">{{flag}}</span></p>
//现在vue实例中设置一个flag  当打开页面的时候 因为flag是true  v-model执行所以复选框处于选中状态  此时点击复选框 变成非选中状态 这时v-model执行 把flag设置为false 此时就会触发
同步更新页面  span里面的变量会随着更改
</div>
var vm = new Vue({
	el:"#app",
	data:{
		flag:true
	}
})