v-model的使用原理

最新推荐文章于 2024-07-09 21:18:14 发布

xiaocmianju

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量62

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/xiaocmianju/article/details/124981878

版权

v-model = v-bind + v-on，实现双向绑定需要是用v-bind和v-on，使用v-bind给input的value绑定message对象，此时message对象改变，input的值也会改变。但是改变input的value并不会改变message的值，此时需要一个v-on绑定一个方法，监听事件，当input的值改变的时候，将最新的值赋值给message对象。$event获取事件对象，target获取监听的对象dom，value获取最新的值。

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>{{msg}}</h2>
			<input type="text" :value="msg"@input="changeMsg"/>
		</div>
		<script src="../vue.js"></script>
		<script>
			const app=new Vue({
				el:"#app",
				data(){
					return{
						msg:'张三'
					}
				},
				methods:{
					changeMsg(e){
						this.msg=e.target.value
						console.log(e);
					}
				}
			})
		</script>
	</body>
</html>

xiaocmianju

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model的使用原理

v-model = v-bind + v-on，实现双向绑定需要是用v-bind和v-on，使用v-bind给input的value绑定message对象，此时message对象改变，input的值也会改变。但是改变input的value并不会改变message的值，此时需要一个v-on绑定一个方法，监听事件，当input的值改变的时候，将最新的值赋值给message对象。$event获取事件对象，target获取监听的对象dom，value获取最新的值。代码如下<!DOCTYPE html
复制链接

扫一扫